android UI模板自定义设计

在平时开发android过程中，我们都是直接使用系统自带的UI模板，不知道有没有朋友想过，当你要修改某样东西的时候，是不是大部分都要进行修改呢？这样的话工作量就大了。下面我们以一个标题栏TopBar来为大家讲解如何自定义一个UI模板。看看效果图

首先打开android studio，在res资源目录下的values目录中，新建一个attrs.xml文件，这个文件用来存放自定义的view属性常量，如图

新建好文件后，写入上述代码。代码中定义了一个declare-styleable标签，取名为TopBar。标签内包含了标题栏中的三个控件，左边的back按钮，中间的标题栏，右边的more按钮。

写完属性后，就可以新建一个名为TopBar的java文件了，但是注意，这个文件要继承RelativeLayout类

接下来要做的事情就是把刚才定义的那些属性封装起来，然后加入到view中，下面我直接把代码贴出来，供大家参考。

public class TopBar extends RelativeLayout {

    private Button leftButton,rightButton;
    private TextView titleTV;

    private String titleText,leftText,rightText;
    private float titleTextSize;
    private int titleTextColor,leftTextColor,rightTextColor;
    private Drawable leftBackground,rightBackground;

    private LayoutParams titleParams,leftParams,rightParams;
    //左右按钮点击事件的接口(接口回调机制)
    public interface topbarClickListener{
        public void leftClick();
        public void rightClick();
    }
    private topbarClickListener listener;
    public void setOnTopbarClickListener(topbarClickListener listener){
        this.listener = listener;
    }


    @RequiresApi(api = Build.VERSION_CODES.JELLY_BEAN)
    public TopBar(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        TypedArray typedArray = context.obtainStyledAttributes(attrs,R.styleable.TopBar);

        titleText = typedArray.getString(R.styleable.TopBar_titleText);
        leftText = typedArray.getString(R.styleable.TopBar_leftText);
        rightText = typedArray.getString(R.styleable.TopBar_rightText);

        titleTextSize = typedArray.getDimension(R.styleable.TopBar_titleTextSize,0);

        titleTextColor = typedArray.getColor(R.styleable.TopBar_titleTextColor,0);
        leftTextColor = typedArray.getColor(R.styleable.TopBar_leftTextColor,0);
        rightTextColor = typedArray.getColor(R.styleable.TopBar_rightTextColor,0);

        leftBackground = typedArray.getDrawable(R.styleable.TopBar_leftBackground);
        rightBackground = typedArray.getDrawable(R.styleable.TopBar_rightBackground);
        //回收
        typedArray.recycle();
        //设置属性值
        titleTV = new TextView(context);
        leftButton = new Button(context);
        rightButton = new Button(context);

        titleTV.setText(titleText);
        titleTV.setTextSize(titleTextSize);
        titleTV.setTextColor(titleTextColor);
        titleTV.setGravity(Gravity.CENTER); //设置标题为居中

        leftButton.setText(leftText);
        leftButton.setTextColor(leftTextColor);
        leftButton.setBackground(leftBackground);

        rightButton.setText(rightText);
        rightButton.setTextColor(rightTextColor);
        rightButton.setBackground(rightBackground);
        //设置整个TopBar的背景色
        setBackgroundColor(Color.WHITE);

        //把控件放入layout中,属性参数(宽，高)
        titleParams = new LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.MATCH_PARENT);
        titleParams.addRule(RelativeLayout.CENTER_IN_PARENT,TRUE);  //增加规则(居中)
        addView(titleTV,titleParams);  //增加到View中

        leftParams = new LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);
        leftParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT,TRUE); //增加规则(左对齐)
        addView(leftButton,leftParams);

        rightParams = new LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);
        rightParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT,TRUE); //增加规则(右对齐)
        addView(rightButton,rightParams);

        leftButton.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View view) {
                listener.leftClick();
            }
        });
        rightButton.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View view) {
                listener.rightClick();
            }
        });
    }
}

上面的代码中使用了一个接口回调机制，这是一个很好用的机制，android源码中经常会碰到这种，有不会的同学可以参考一下，详细解释可以自行百度。

自定义的java文件已经写好了，接下来就是如何引用的问题。我们都知道在layout目录下的xml文件就是一个页面，在里面写布局时都会引用一段代码

xmlns:android="http://schemas.android.com/apk/res/android"

这句话的意思就是引用android系统的控件，那么我们要用自定义的控件又如何引用呢？其实也是类似的，下面给出主页面activity_main.xml的布局代码

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <com.example.school.TopBar
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:id="@+id/topbar"
        app:titleText="众校"
        app:titleTextSize="5dp"
        app:titleTextColor="#000"
        app:leftText="back"
        app:leftTextColor="#f30"
        app:leftBackground="#22f"
        app:rightText="more"
        app:rightTextColor="#f30"
        app:rightBackground="#22f">

    </com.example.school.TopBar>
</LinearLayout>

可以看到在引用自定义的控件中，所用的属性就是刚才自己在attrs.xml文件中定义的那些属性，到此为止，自定义的TopBar就用到页面上了，下面我们在MainActivity.java文件中给左右两边的按钮添加一个点击事件，以证明自己定义的View时真实可用的

public class MainActivity extends FragmentActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //标题栏
        TopBar topBar = (TopBar) findViewById(R.id.topbar);
        topBar.setOnTopbarClickListener(new TopBar.topbarClickListener() {
            @Override
            public void leftClick() {
                Toast.makeText(MainActivity.this,"点击了back",Toast.LENGTH_SHORT).show();
            }

            @Override
            public void rightClick() {
                Toast.makeText(MainActivity.this,"点击了more",Toast.LENGTH_SHORT).show();
            }
        });
    }
}

至此，引用已经结束了，到时候直接修改监听器里面的代码就能控制点击事件了。

更多android知识，请关注微信公众号kshon

android UI模板自定义设计

猜你喜欢