美文网首页
适配器设计模式浅析 + Adapter打造一个Tablayout

适配器设计模式浅析 + Adapter打造一个Tablayout

作者: 碧云天EthanLee | 来源:发表于2021-08-12 00:28 被阅读0次
    概述

    适配器模式可以把一个类的接口变换成客户端所期待的另一种接口。从而使原本接口不匹配而无法在一起工作的两个类能够在一起工作。巴拉巴拉...

    好了,闲话少说。适配器模式我们平时开发当中不一定常用(看个人风格),但是一定没少见。比如,早前的 ListView就用了这模式,还有一个 SimpleAdapter。再比如,我们现在常见的 RecyclerView的自定义 Adapter等等等等。

    这次我们就结合例子,自己写一个 Tablayout顶部导航标签布局,来看一看这个Adapter设计模式的用处。

    • 创建 Adapter
      首先,按照习惯,我们先创建一个 Adapter的抽象类:
    public abstract class BaseAdapter {
    
        // 定义标签数量
        protected abstract int getCount();
        // 创建标签的 View
        protected abstract View getView(View parent, int index);
    
    }
    

    两个方法分别用于获取标签的数量和创建标签的 ItemView。然后我们再实现这个 BaseAdapter :

    public class TabLayoutAdapter extends BaseAdapter{
        private List<String> data;
    
        public TabLayoutAdapter(){
            data = new ArrayList<>();
        }
    
        public TabLayoutAdapter setData(List<String> data1){
            data.clear();
            data.addAll(data1);
            // 链式结构
            return this;
        }
    
        @Override
        protected int getCount() {
            return data.size();
        }
    
        @Override
        protected View getView(View parent, int index) {
            // 注释1, 创建一个 Item
            View itemView = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_tab, null);
            TextView textView = itemView.findViewById(R.id.tab_text);
            textView.setText(data.get(index));
            // 测试
            if (index == 3) textView.setTextColor(Color.RED);
            // 注释 2 返回 Item
            return itemView;
        }
    }
    

    看到上面TabLayoutAdapter 实现类的结构,如果我们经常自定义RecyclerView的Adapter那一定不会陌生。注释 1和注释 2创建了 Layout的一个ItemView返回。数据长度和 ItemView返回之后就交由父布局处理了。接下来我们来创建一个简单的TabLayout,处理一下这个 ItemView和ItemLength:

    • TabLayout
    /**
     * 碧云天
     * 
     * MyTabLayout
     */
    public class MyTabLayout extends ScrollView {
    
        private LinearLayout mLinearLayout;
        private BaseAdapter mBaseAdapter;
        private int itemCount;
    
        public MyTabLayout(Context context) {
            this(context, null);
        }
    
        public MyTabLayout(Context context, AttributeSet attrs) {
            this(context, attrs, 0);
        }
    
        public MyTabLayout(Context context, AttributeSet attrs, int defStyleAttr) {
            super(context, attrs, defStyleAttr);
            init(context, attrs, defStyleAttr);
        }
    
        private void init(Context context, AttributeSet attrs, int defStyleAttr){
            mLinearLayout = new LinearLayout(context);
            mLinearLayout.setOrientation(HORIZONTAL);
            LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(
                    ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
            mLinearLayout.setLayoutParams(layoutParams);
            //注释 3, 我们这个 View继承自 ScrollView,只能有一个字View
            // 所以我们给它添加一个 LinearLayout,来装所有的 ItemView
            addView(mLinearLayout);
        }
    
        public void setAdapter(BaseAdapter baseAdapter) {
            if (baseAdapter == null){
                throw  new NullPointerException("Adapter is null");
            }
            mBaseAdapter = baseAdapter;
            itemCount = mBaseAdapter.getCount();
            addItem();
        }
    
        private void addItem(){
           for (int i = 0 ; i < itemCount; i ++){
               //注释 4 向布局 LinearLayout循环添加 所有 ItemView
               mLinearLayout.addView(mBaseAdapter.getView(mLinearLayout, i));
           }
        }
    }
    

    这里的 MyTabLayout 继承自 ScrollView ,这样为了可以实现滑动。因为 ScrollView 只能添加一个 子View或者一个子布局,无法添加所有的 ItemView。所以在上面注释 3处我们给它添加一个LinearLayout,我们往LinearLayout里添加 ItemView。在 setAdapter之后,注释 4的地方我们循环添加 ItemView。

    • 使用

    定义好了,下面就开始使用了。按照步骤,应该先准备好数据的数组。然后创建一个 Adapter对象,给 Adapter对象设置数据。最后调用 TabLayout的 setAdapter方法设置适配器:

    public class MainActivity extends AppCompatActivity {
        private MyTabLayout mTableLayout;
        private List<String> data = new ArrayList<>();
        private BaseAdapter mTabLayoutAdapter;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            mTableLayout = findViewById(R.id.my_tab);
            data.add("首页");
            data.add("手机");
            data.add("美妆");
            data.add("运动");
            data.add("食品");
            init();
        }
    
        private void init(){
            mTabLayoutAdapter = new TabLayoutAdapter().setData(data);
            // 设置适配器
            mTableLayout.setAdapter(mTabLayoutAdapter);
        }
    }
    

    效果:


    Adapter.PNG

    当然,我们这次写的这个 TabLayout这个例子是非常low的。因为这次讲的不是自定义 View的东西,而是用例子实现一下 Adapter设计模式。主要讲设计模式,所以自定义布局这次就不再优化了。
    Demo :AdapterDesign

    相关文章

      网友评论

          本文标题:适配器设计模式浅析 + Adapter打造一个Tablayout

          本文链接:https://www.haomeiwen.com/subject/ilrkbltx.html