自定义View ——— 组合继承

最新推荐文章于 2022-07-04 00:18:15 发布

jxq1994

最新推荐文章于 2022-07-04 00:18:15 发布

阅读量466

点赞数

分类专栏：自定义View之组合

本文链接：https://blog.csdn.net/jxq1994/article/details/60866961

版权

自定义View之组合专栏收录该内容

2 篇文章 0 订阅

订阅专栏

今天我们看一下这个控件

这里写图片描述
我们使用RecyclerView+Picasso来完成。

1.布局文件

activity_item.xml :

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/masonry_item_img"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_margin="5dp"
        android:adjustViewBounds="true"
        android:scaleType="centerCrop"
        android:src="@mipmap/ic_launcher"/>
    <TextView
        android:id="@+id/masonry_item_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="TEXT"/>

</LinearLayout>

activity_main.xml :

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    tools:context="com.example.administrator.myviewapplication.MainActivity">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerview"
        android:padding="10dp"
        android:layout_width="match_parent"
        android:layout_gravity="center"
        android:layout_height="100dp">
    </android.support.v7.widget.RecyclerView>

    <View
        android:layout_width="match_parent"
        android:layout_height="2dp"
        android:background="@color/colorPrimaryDark"/>


    <TextView
        android:id="@+id/total"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="right"
        android:paddingTop="5dp"
        android:text="数量："/>

</LinearLayout>

效果图如下：

这里写图片描述

2.RecyclerView的运用

不会用RecyclerView的话可以先看一下这里。

1. 创建Bean类

ErpGoodModel.java:

public class ErpGoodsModel implements Serializable {
    private double price;
    private String bmiddle_pic;

    public double getPrice() {
        return price;
    }

    public void setPrice(double price) {
        this.price = price;
    }

    public String getBmiddle_pic() {
        return bmiddle_pic;
    }

    public void setBmiddle_pic(String bmiddle_pic) {
        this.bmiddle_pic = bmiddle_pic;
    }
}

2. 为MainActivity配置视图

MainActivity.java :

public class MainActivity extends AppCompatActivity {

    private RecyclerView recyclerView;
    private TextView total;
    private double totalMoney;
    private ErpGoodsModel erp;

    private ArrayList<ErpGoodsModel> erpGoodslist ;

    private ItemAdapter adapter;

    public final  static double imagePrice[] = new double[]{
            22.00,
            44.00,
            66.00,
            88.00,
            100
    };

    public final static String[] imageThumbUrls = new String[] {
            "https://img-blog.csdn.net/20160527205448521",
            "https://img-blog.csdn.net/20160527205516475",
            "https://img-blog.csdn.net/20160527205804527",
            "https://img-blog.csdn.net/20160527205831152",
            "https://img-blog.csdn.net/20160527205912200",
            "https://img-blog.csdn.net/20160527205946793",
            "https://img-blog.csdn.net/20160527210011184",
            "https://img-blog.csdn.net/20160527210026200",
            "https://img-blog.csdn.net/20160527210039778",
            "https://img-blog.csdn.net/20160527210053919"
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        initView();
        erpGoodslist = initDate();
        adapter = new ItemAdapter(getApplicationContext(),erpGoodslist);
        recyclerView.setAdapter(adapter);

        for (int i = 0; i < erpGoodslist.size(); i++) {
            erp = erpGoodslist.get(i);
            totalMoney += erp.getPrice();
        }
        String number = ""+erpGoodslist.size();
        String total1 = "数量：";
        String money = ""+totalMoney;
        String total2 = "金额：";

        total.setText(Html.fromHtml("<big>"+total1+"</big>"+"<b><font color=#ff0000>"+ number + " "+"</b><font/>"
                +"<big>"+total2+"</big>"+"<b><font color=#ff0000>"+ money + "</b><font/>" ));

    }

    private  void initView() {
        recyclerView = (RecyclerView) findViewById(R.id.recyclerview);
        LinearLayoutManager mLayoutManager = new LinearLayoutManager(this);
        mLayoutManager.setOrientation(LinearLayout.HORIZONTAL);

        recyclerView.setLayoutManager(mLayoutManager);
        recyclerView.setHasFixedSize(true);
        total = (TextView) findViewById(R.id.total);

    }

    private ArrayList<ErpGoodsModel> initDate() {
        ArrayList<ErpGoodsModel> list = new ArrayList<>();

        for(int i=0; i<imagePrice.length; ++i){
            ErpGoodsModel erp = new ErpGoodsModel();
            erp.setBmiddle_pic(imageThumbUrls[i]);
            erp.setPrice(imagePrice[i]);
            list.add(erp);
        }
        return list;
    }

}

在上述代码中，我们使用了TextView＋　Ｈｔｍｌ的方法来自定义文字的样式和颜色。想学习的这个。这不是今天的重点。

3. 实现Adapter和ViewHolder

ItemAdapter.java:

public class ItemAdapter extends RecyclerView.Adapter<ItemAdapter.ItemViewHolder> {
    private Context mContext;
    private static Bitmap bitmap;
    private static Handler handler;

    public static ArrayList<ErpGoodsModel> goodsModelList;

    public ItemAdapter(Context context,ArrayList<ErpGoodsModel> goodsModelList) {

        this.mContext = context;
        this.goodsModelList = goodsModelList;
    }




    @Override
    public ItemViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        LayoutInflater layoutInflater = LayoutInflater.from(parent.getContext());
        View view = layoutInflater.inflate(R.layout.activity_item,parent,false);
        return new ItemViewHolder(view);
    }

    @Override
    public void onBindViewHolder(final ItemViewHolder holder, int position) {
        ErpGoodsModel erpGoods = goodsModelList.get(position);

//使用Picasso库加载网络图片
        Picasso.with(mContext).load(erpGoods.getBmiddle_pic()).resize(120,60).into(holder.mImageView);

holder.bindView(erpGoods);
    }
    @Override
    public int getItemCount() {
        return goodsModelList.size();
    }

    public static class ItemViewHolder extends RecyclerView.ViewHolder{
        private ErpGoodsModel erpGoodsModel;
        public ImageView mImageView;
        public TextView mTextView;


        public ItemViewHolder(View itemView) {
            super(itemView);
            mImageView = (ImageView) itemView.findViewById(R.id.masonry_item_img);
            mTextView = (TextView) itemView.findViewById(R.id.masonry_item_title);
            //mImageUrl = (TextView) itemView.findViewById(R.id.masonry_item_img);
        }

        private void bindView(final ErpGoodsModel erp){
            erpGoodsModel = erp;
            mTextView.setText(erp.getPrice()+"");

    }

}

关于Picasso库的使用。

最后加上网络权限，引入库就好了。

 <uses-permission android:name="android.permission.INTERNET"/>

compile 'com.android.support:recyclerview-v7:23.2.0'
    compile 'com.squareup.picasso:picasso:2.5.2'

效果图如下：

这里写图片描述
接下来才是重点，如何组合继承自定义View。

1.定义一个View类继承现有布局

我们这里需要继承的是activity_main的布局，首先添加几个构造方法和一个init()方法来加载布局：

public class ItemView extends RelativeLayout {

    private RecyclerView recyclerView;
    private TextView total;
    private ItemAdapter adapter;
    private Context context;
    private double totalMoney;
    private ErpGoodsModel erp;
    public ItemView(Context context) {
        super(context);
        init(context);
    }

    public ItemView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init(context);

    public ItemView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context);
    }

    private void init(Context context) {
        this.context =context;
        View inflate = View.inflate(context, R.layout.activity_main, null);
        addView(inflate);
        total = (TextView) inflate.findViewById(R.id.total);
        recyclerView = (RecyclerView) inflate.findViewById(R.id.recyclerview);
        LinearLayoutManager mLayoutManager = new LinearLayoutManager(context);
        mLayoutManager.setOrientation(LinearLayout.HORIZONTAL);

        recyclerView.setLayoutManager(mLayoutManager);
        recyclerView.setHasFixedSize(true);
        total = (TextView) findViewById(R.id.total);
    }

}

2.然后写一个设置数据的方法

这个方法用于你向控件填充数据比如设置图片/文字等，也可用于改变控件状态比如改变文字颜色/样式等。

ItemView.java :

public class ItemView extends RelativeLayout {

...

 public void setData(ArrayList<ErpGoodsModel> data) {
        adapter = new ItemAdapter(context,data);
        recyclerView.setAdapter(adapter);
        adapter.notifyDataSetChanged();
        for (int i = 0; i < data.size(); i++) {
            erp = data.get(i);
            totalMoney += erp.getPrice();
        }
        String number = ""+data.size();
        String total1 = "数量：";
        String money = ""+totalMoney;
        String total2 = "金额：";

        total.setText(Html.fromHtml("<big>"+total1+"</big>"+"<b><font color=#ff0000>"+ number + " "+"</b><font/>"+", "
                +"<big>"+total2+"</big>"+"<b><font color=#ff0000>"+ money + "</b><font/>" ));
    }
 }

3.调用方法

接着我们只需要在Main文件中调用需要的方法：

MainActivity.java :

 protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        initView();

        erpGoodslist = initDate();
 //调用setData()方法
        ItemView.setData(erpGoodslist);

    private  void initView() {
        ItemView = (ItemView)findViewById(R.id.ItemView);

    }

4.在xml布局中使用组合控件

main.xml :

<com.example.administrator.myviewtestone.ItemView
        android:id="@+id/ItemView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</RelativeLayout>

以上就是真个组合控件实现的过程。我们来梳理一下流程：

在XML布局文件中定义好一个组合布局。
继承ViewGroup类自定义组合控件。
1. 在自定义组合控件的构造方法中通过LayoutInflater加载组合布局。
在xml布局中使用组合控件。

jxq1994

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自定义View ——— 组合继承

今天我们看一下这个控件我们使用RecyclerView+Picasso来完成。1.布局文件activity_item.xml :<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="m
复制链接

扫一扫