ViewController

ViewController

Un contrôleur de vue gère un ensemble de vues qui constituent une partie de l'interface utilisateur de votre application, il vise à rendre l'interface utilisateur plus claire et plus flexible.

Anglais | 中文 | Android 复杂界面开发实践之 ViewController: 介绍

démo

Avantage

• Faire des composants de développement d'interface utilisateur, résoudre le problème du code gonflé.
• Flexible, un composant peut être utilisé plus dans un endroit.
• Utilisation facile, facile à développer.

Usage

En tant que bonne pratique, je vous recommande d'exécuter ou de regarder le code de démonstration directement.

dépendance à l'importation

Vous pouvez importer une dépendance ou copier directement le fichier source dans votre projet, jusqu'à présent, un seul fichier dans cette lib.

Ajoutez le référentiel Jitpack à votre fichier de construction

allprojects {
	repositories {
		.. .
		maven { url " https://jitpack.io " }
	}
}

Ajouter la dépendance

dependencies {
	 compile ' com.github.maoruibin:ViewController:0.9.1 '
}

Développer la composante

Tout comme cette image de démonstration, nous devons développer quatre composants.

Maintenant, je veux développer le composant de commentaires en tant que démo, je vais présenter l'annotation Point by Code.

 // 1、every component mast extends ViewController
public class HouseCommentViewController extends ViewController < List < String >> 

// 2、indicate layout id for this component  
@ Override
protected int resLayoutId () {
    return R . layout . detail_comment_layout ;
}

// init this component's view element 
@ Override
protected void onCreatedView ( View view ) {
    mLlContainer = view . findViewById ( R . id . ll_container );
    ...
}

// bind data to this view component 
@ Override
protected void onBindView ( List < String > comments ) {
    for ( String comment : comments ) {
        TextView view = new TextView ( getContext ());
        view . setBackgroundResource ( R . color . bk_item );
        view . setText ( comment );
        int padding = Utils . dp2px ( 16 );
        view . setPadding ( padding , padding , padding , padding );
        mLlContainer . addView ( view );
    }
}

Maintenant, nous avons terminé un composant de vue simple, et vous pouvez regarder l'implémentation des composants gauche par code de démonstration.

Assembler les composants en activité

Nous avons terminé quatre composants pour l'interface utilisateur des détails de la maison.

 HousePhotoViewController    //House picture component 
HouseParamViewController    //House param info component
HouseDescViewController     //House description component
HouseCommentViewController  //House comment component

Le travail de gauche est assemblé. Le cœur de l'assemble est

Chaque contrôleur de vue prend en charge un moyen d'attacher la vue du propriétaire à la disposition racine, de sorte que l'activité doit avoir une mise en page de racine pour remplir toutes les vues.

Le code Java est comme ça

 // 1、define ViewController instance
private ViewController < List < String >> mHousePhotoViewController ;
private ViewController < HouseDetail . Param > mHouseParamViewController ;
private ViewController < List < String >> mHouseCommentViewController ;
private ViewController < String > mHouseDescViewController ;

// 2、init instance 
mHousePhotoViewController = new HousePhotoViewController ( this );
mHouseParamViewController = new HouseParamViewController ( this );
mHouseDescViewController = new HouseDescViewController ( this );
mHouseCommentViewController = new HouseCommentViewController ( this );

// 3、attach view controller to activity root, usually the best choose for root is a vertical LinearLayout. 
mHousePhotoViewController . attachRoot ( mLlContainer );
mHouseParamViewControler . attachRoot ( mLlContainer );
mHouseDescViewControler . attachRoot ( mLlContainer );
mHouseCommentViewControler . attachRoot ( mLlContainer );

// 4 、mock get data 
getData ();

// 5、fill data to UI 

fillData ();

// 6、fill data to different view controller
private void fillData ( HouseDetail detail ) {
    mHousePhotoViewController . fillData ( detail . photos );
    mHouseParamViewController . fillData ( detail . param );
    mHouseDescViewController . fillData ( detail . desc );
    mHouseCommentViewController . fillData ( detail . comments );
}

Et maintenant, une interface utilisateur complexe avait divisé quatre composants, de cette façon, tous les composants ne traitent que la logique du propriétaire.

Et si d'autres activités ou fragments ont un même composant besoin d'implémentation, vous pouvez réutiliser directement le code, sympa!

FAIRE

• Gérer le cycle de vie
• Prise en charge d'un Templete AndroidStudio pour générer un cadre ViewController

Auteur

http://gudong.name

https://github.com/maoruibin

Licence

 Copyright 2016 咕咚

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.