android使用设计模式打造标题栏

作者: 冷泡茶童鞋 | 来源:发表于2017-02-13 00:29 被阅读322次

从大学出来实习已经有半年了，之前只写过一篇笔记就没有下文了。
现在来重新记录自己的学习。
年前回家前，给自己定一个小目标，一个星期一两篇android的笔记，有空的时候写写博客，对以后开发还有见解有一定的帮助，所以撸起袖子就是干。
今天写一个用builder设计模式来写一个标题栏，关于builder这个设计模式我就不介绍了

1，首先先定义好一个接口，这个接口里，我就不一一介绍了，代码里有注释

public interface ItoolBarBuild {
    //设置标题
    public ItoolBarBuild setTitle(int title);
    //设置左边的按钮
    public ItoolBarBuild setLeftIcon(int leftIcon);
    //设置右边的按钮
    public ItoolBarBuild setRightIcon(int rightIcon);
    //设置左边的点击
    public ItoolBarBuild setLeftIconOnClickListener(View.OnClickListener onClickListener);
    //设置右边的点击
    public ItoolBarBuild setRightIconOnClickListener(View.OnClickListener onClickListener);
    //绑定view
    public void addIn(ViewGroup group);
}

2.写一个ToolBarBuild类来实现ItoolBarBuild 接口

public abstract class ToolBarBuild implements ItoolBarBuild {
    private int title;
    private int leftIcon;
    private int rightIcon;
    private Context mContext;
    private View contentView;
    View.OnClickListener leftIconOnClickListener;
    View.OnClickListener rightIconOnClickListener;
    public ToolBarBuild(Context context){
        this.mContext = context;
    }
    @Override
    public ItoolBarBuild setTitle(int title) {
        this.title = title;
        return this;
    }
    
    @Override
    public ItoolBarBuild setLeftIcon(int leftIcon) {
        this.leftIcon = leftIcon;
        return this;
    }

    @Override
    public ItoolBarBuild setRightIcon(int rightIcon) {
        this.rightIcon = rightIcon;
        return this;
    }

    @Override
    public ItoolBarBuild setLeftIconOnClickListener(View.OnClickListener onClickListener) {
        this.leftIconOnClickListener = onClickListener;
        return this;
    }

    @Override
    public ItoolBarBuild setRightIconOnClickListener(View.OnClickListener onClickListener) {
        this.rightIconOnClickListener = onClickListener;
        return this;
    }

    public int getLeftIcon() {
        return leftIcon;
    }

    public int getTitle() {
        return title;
    }

    public int getRightIcon() {
        return rightIcon;
    }

    public Context getmContext() {
        return mContext;
    }

    public View.OnClickListener getLeftIconOnClickListener() {
        return leftIconOnClickListener;
    }

    public View.OnClickListener getRightIconOnClickListener() {
        return rightIconOnClickListener;
    }

    @Override
    public void addIn(ViewGroup parent) {
        //加载标题栏的视图
        contentView = LayoutInflater.from(getmContext()).inflate(getToolBarLayout(),parent,false);//将layout写成一个抽象的getToolBarLayout方法
        //获取该view的父组件
        ViewGroup viewGroup = (ViewGroup) contentView.getParent();
        //如果该视图的父组件已经存在就将remove掉
        if (viewGroup!=null){
            viewGroup.removeView(contentView);
        }
        //将view加入从外面传进来的ViewGroup里,标题栏都是在最顶上，所以在第二个参数传入0
        parent.addView(contentView,0);
    }
    //实例化ImageView
    public void setImageView(int id, int res , View.OnClickListener onClickListener) {
        ImageView imageView = (ImageView) contentView.findViewById(id);
        imageView.setVisibility(View.VISIBLE);
        imageView.setImageResource(res);
        imageView.setOnClickListener(onClickListener);
    }
    //实例化TextView
    public void setTextView(int id, int res , View.OnClickListener onClickListener){
        TextView textView  = (TextView) contentView.findViewById(id);
        textView.setVisibility(View.VISIBLE);
        textView.setOnClickListener(onClickListener);
        textView.setText(res);
    }
    public abstract int getToolBarLayout();

}

3,在写一个ToolBarView去继承ToolBarBuild；

public class ToolBarView extends ToolBarBuild {

    public ToolBarView(Context context) {
        super(context);
    }

    @Override
    public int getToolBarLayout() {
        return R.layout.toolbar_layout;
    }

    @Override
    public void addIn(ViewGroup parent) {
        super.addIn(parent);
        //假如在toolbar_layout设置了TextView的text,ImageView的图片而且并不用实现点击事件的话可以不调用
        //在第二个参数如果传入0,该空间就会隐藏
        setImageView(R.id.iv_left,getLeftIcon(),getLeftIconOnClickListener());
        
        setImageView(R.id.iv_right,getRightIcon(),getRightIconOnClickListener());
        //如果需要动态设置的话，但是不用点击事件的话直接在第三个参数传null,就可以了
        setTextView(R.id.tv_title,getTitle(),null);
    }
}

标题栏的视图如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:orientation="horizontal"
    android:background="#79b2f9">

    <LinearLayout
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:gravity="center_vertical">
        <ImageView
            android:id="@+id/iv_left"
            android:layout_width="25dp"
            android:layout_height="25dp"
            android:layout_marginLeft="@dimen/margin_left_12_dp"/>
    </LinearLayout>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_weight="2"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:gravity="center">
        <TextView
            android:id="@+id/tv_title"

            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:gravity="center_vertical|right">
        <ImageView
            android:id="@+id/iv_right"
            android:layout_width="25dp"
            android:layout_height="25dp"
            android:layout_marginRight="@dimen/margin_left_12_dp"/>
    </LinearLayout>

</LinearLayout>

这样子标题栏就算是完成了，下面我们来使用它；

public class MainActivity extends AppCompatActivity {
    LinearLayout linearLayout;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ToolBarView toolBarView = new ToolBarView(getBaseContext());
        linearLayout = (LinearLayout) findViewById(R.id.ll_content);
        toolBarView.setTitle(R.string.title)
                    .setLeftIcon(R.drawable.left_icon)
                    .setRightIcon(R.drawable.right_icon)
                    .setLeftIconOnClickListener(new View.OnClickListener() {
                        @Override
                        public void onClick(View view) {
                            Toast.makeText(getBaseContext(),"点击左边按钮",Toast.LENGTH_SHORT).show();
                        }
                    })
                    .setRightIconOnClickListener(new View.OnClickListener() {
                        @Override
                        public void onClick(View view) {
                            Toast.makeText(getBaseContext(),"点击右边按钮",Toast.LENGTH_SHORT).show();
                        }
                    })
                    .addIn(linearLayout);//一定要调用这个方法，不然就没有实现这个标题栏

    }
}

运行结果：

QQ截图20170212235748.png

Paste_Image.png

基本的标题栏就是左中右的布局，但是也有一些不一样的
在这里我介绍写一种其他的，并在原来的代码添加一些代码，感觉代码这样封装也是挺灵活的，2333....
直接在ToolBarView里添加两个跟ToolBarView的超类里类似的方法；
如下所示

public class ToolBarView extends ToolBarBuild {
    private int res;
    private View.OnClickListener listener;
    public ToolBarView(Context context) {
        super(context);
    }

    @Override
    public int getToolBarLayout() {
        return R.layout.toolbar_layout;
    }
    public ToolBarView setOtherRightIcon(int res){
        this.res = res;
        return this;
    }
    public ToolBarView setOtherOnClickListener(View.OnClickListener listener){
        this.listener = listener;
        return this;
    }
    @Override
    public void addIn(ViewGroup parent) {
        super.addIn(parent);
        //假如在toolbar_layout设置了TextView的text,ImageView的图片而且并不用实现点击事件的话可以不调用
        //在第二个参数如果传入0,该空间就会隐藏
        setImageView(R.id.iv_left,getLeftIcon(),getLeftIconOnClickListener());

        setImageView(R.id.iv_right,getRightIcon(),getRightIconOnClickListener());
        //如果需要动态设置的话，但是不用点击事件的话直接在第三个参数传null,就可以了
        setTextView(R.id.tv_title,getTitle(),null);
        
        setImageView(R.id.iv_right_other,res,listener);
    }
}

运行结果：

Paste_Image.png

就这样搞定了；
其他的情况也是同样的思路；
欢迎交流，我还是一个小菜鸟，android基础不太牢固，虽然出来实习半年了，但是其中干了两个月的前端，有空写写js跟android的交互和开发的时候遇到的那些问题解决方法；虽然网上也有很多教程，但是还是想自己写笔记，好记性不如烂笔头；

android使用设计模式打造标题栏

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读