android ui元模型建模 android ui模板

简单学习了Android UI 模板，自定义的UI模板，在自己设计的app中可以进行有效的代码复用。在这里做个流程整理，之后再添加漂亮的效果：

首先加个在线阅读Android 源码的链接：点击打开链接  花个时间阅读一下系统的封装方法对学习Android帮助还是挺大滴。

1、在工程目录的res/values文件中添加atts.xml文件，设计需要的属性：

<resources>
    <declare-styleable name="TopBar">
        <attr name="TitleText" format="string"/>
        <attr name="TitleColor" format="color"/>
        <attr name="TextSize" format="dimension"/>
        <attr name="LeftText" format="string"/>
        <attr name="LeftColor" format="color"/>
        <attr name="LeftBackground" format="color|reference"/>
        <!--类型不一定，使用reference-->
        <attr name="RightText" format="string"/>
        <attr name="RightColor" format="color"/>
        <attr name="RightBackground" format="color|reference"/>

    </declare-styleable>
</resources>

<attr name="" format=“”> 定义模板中属性的名字和取值类型。

2.定义View

public class TopBar extends RelativeLayout {
    private Button leftbutton,rightbutton;
    private TextView tvTitle;
    //获取组件中的属性
    private String titleText,leftText,rightText;
    private int titleColor,leftColor,rightColor;
    private float titleSize;
    private Drawable leftBackground,rightBackground;

    private LayoutParams leftparams,rightparams,titleparams;
    private OnTopBarListenner listenner;

    public interface OnTopBarListenner{
        public void leftclick();
        public void rightclick();
    }
    public void setOnClikTopBarListenner(OnTopBarListenner listenner){
        this.listenner=listenner;
    }

    public TopBar(Context context, AttributeSet attrs) {
        super(context, attrs);
       <strong> TypedArray ta=context.obtainStyledAttributes(attrs,R.styleable.TopBar);</strong>
        titleColor=ta.getColor(R.styleable.TopBar_TitleColor, 0);
        titleSize=ta.getDimension(R.styleable.TopBar_TextSize, 0);
        titleText=ta.getString(R.styleable.TopBar_TitleText);
        
        leftText=ta.getString(R.styleable.TopBar_LeftText);
        leftColor=ta.getColor(R.styleable.TopBar_LeftColor, 0);
        leftBackground=ta.getDrawable(R.styleable.TopBar_LeftBackground);

        rightText=ta.getString(R.styleable.TopBar_RightText);
        rightColor=ta.getColor(R.styleable.TopBar_RightColor, 0);
        rightBackground=ta.getDrawable(R.styleable.TopBar_RightBackground);

        ta.recycle();
        leftbutton=new Button(context);
        rightbutton=new Button(context);
        tvTitle=new TextView(context);
        
        leftbutton.setText(leftText);
       // leftbutton.setBackground(leftBackground);//这里注意sdk不能低于16
        leftbutton.setTextColor(leftColor);

        rightbutton.setText(rightText);
       // rightbutton.setBackground(rightBackground);//这里注意sdk不能低于16
        rightbutton.setTextColor(rightColor);

        tvTitle.setText(titleText);
        tvTitle.setTextColor(titleColor);
        tvTitle.setTextSize(titleSize);
        tvTitle.setGravity(Gravity.CENTER);

        setBackgroundColor(0x33a3dcff);

       <strong> leftparams=new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        leftparams.addRule(RelativeLayout.ALIGN_PARENT_LEFT, TRUE);//这里的true是relativeLayout定义的常量</strong>

        rightparams=new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        rightparams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT,TRUE);

        titleparams=new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.MATCH_PARENT);
        titleparams.addRule(RelativeLayout.CENTER_IN_PARENT,TRUE);
        addView(leftbutton, leftparams);
        addView(rightbutton, rightparams);
        addView(tvTitle,titleparams);

        leftbutton.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                listenner.leftclick();
            }
        });
        rightbutton.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                listenner.rightclick();
            }
        });


    }
}

利用接口回调机制，我们封装好用户可以自定义的监听事件，首先定义一个接口interface OnClickListenner{

};然后向用户暴露一个方法：public void SetOnClickListenner(OnClickListener listenner){this.listener=listener};

然后为button(组件)注册这个监听事件，在监听器中执行接口的方法，那么用户只需要实现了接口，再传递给我们暴露的方法，就实现了简单的监听。

同样的道理，如果要实现对模板中组件的操作，只需要在设计View 的时候暴露出公共方法。

3.引用设计的View,和系统提供View 一样调用即可。

xml 文件中使用该组件：

<com.yangyang.myapplication.TopBar
       android:id="@+id/topbar"
       android:layout_width="match_parent"
       android:layout_height="40dp"
       custom:LeftColor="@color/colorAccent"
       custom:LeftText="返回"
       custom:RightColor="@color/colorAccent"
       custom:RightText="更多"
       custom:TextSize="10sp"
       custom:TitleColor="@color/colorAccent"
       custom:TitleText="朋友圈"
       >

</pre><p></p><p><span >JAVA文件中调用：</span></p><p><span ></span></p><pre code_snippet_id="1601001" snippet_file_name="blog_20160307_6_880744" name="code" class="java">protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        TopBar topbar= (TopBar) findViewById(R.id.topbar);
        im= (ImageView) findViewById(R.id.imageView);
        topbar.setOnClikTopBarListenner(new TopBar.OnTopBarListenner() {
            @Override
            public void leftclick() {
                Toast.makeText(MainActivity.this,"点击了左键",Toast.LENGTH_SHORT).show();
            }

            @Override
            public void rightclick() {
                Toast.makeText(MainActivity.this,"点击了右键",Toast.LENGTH_SHORT).show();

            }
        });
}

以上只是简单的基本学习过程，模板很简单还需要改进。