Giter Site home page Giter Site logo

maoruibin / viewcontroller Goto Github PK

View Code? Open in Web Editor NEW
122.0 9.0 26.0 482 KB

:pushpin: A view controller manages a set of views that make up a portion of your app’s user interface,it aims to make ui develop change more clear and flexible.(ViewControler 是一种界面开发组件化实现方式,利用它可以将一些复杂的 UI 界面开发组件化.)

License: Apache License 2.0

Java 80.08% FreeMarker 19.92%
components flexible viewcontroller android

viewcontroller's Introduction

ViewController

A view controller manages a set of views that make up a portion of your app’s user interface, it aims to make ui develop change more clear and flexible.

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

demo

Advantage

  • Make UI development components,resolve problem of code bloated.
  • flexible, one component can used in more place.
  • easy use, easy develop.

Usage

As a good practice, I recommend you run or watch demo code directly.

import dependency

you can import dependency or copy source file to your project directly, so far, only one file in this lib.

Add the JitPack repository to your build file

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

Add the dependency

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

develop component

just like this demo image, we should develop four component.

now I want to develop comment component as a demo, i will introduce the point by code annotation.

// 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);
    }
}

Now, we have finished a simple view component, and you can watch left components implement by demo code.

Assemble Component in Activity

We have finished four components for house detail UI.

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

the left job is assemble. the core of assemble is

every view controller support a way to attach owner's view to root layout,so activity should have a root layout use to fill all views.

The java code is like this

// 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);
}

and now, a complex ui had split four components, by this way, every components only deal with owner logic.

And if other activity or fragment have a same component need implement, you can reuse code directly, nice!

TODO

  • Manage lifecycle
  • Support a AndroidStudio Templete for generate ViewController frame

Author

http://gudong.name

https://github.com/maoruibin

License

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.

viewcontroller's People

Contributors

maoruibin avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

viewcontroller's Issues

No adapter attached; skipping layout

背景条件是:在一个view中加入两个ControllerView对象,他们都 是new 的同一个继承ControllerView.的对象。
然后在ControllerView处理数据中。第一个ControllerView的adapter有数据。第二个ControllerView出现 No adapter attached; skipping layout

一些建议

很明显,你想做的事(所谓的 Layout 解块)和 ViewGroup 重叠了。你自己创造了个所谓「ViewController」的概念,然而这东西不和 View/Fragment 一样能融入到 Android 的开发生态中。

更好的解块法是当然直接继承 ViewGroup(当然你要加 fillData 方法也是行的)。

为什么不直接把不同的几个模块封装成View?

作者的想法很nice,将复杂界面模块化,我有个疑问:

为何要把几个模块自定义成普通class(例如HouseCommentViewController ),而不是直接封装成View(例如HouseCommentView),然后在Activity中直接动态添加这些View即可,View有自己的生命周期(onDestroy中的释放操作就可以放到View的onDettachWindow),并且可以直接拿到context(不需要额外传进去)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.