自定义View ——— 组合继承

来源：互联网发布：小米游戏数据分析编辑：程序博客网时间：2024/05/16 08:27

今天我们看一下这个控件

这里写图片描述
我们使用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[] {            "http://img.blog.csdn.net/20160527205448521",            "http://img.blog.csdn.net/20160527205516475",            "http://img.blog.csdn.net/20160527205804527",            "http://img.blog.csdn.net/20160527205831152",            "http://img.blog.csdn.net/20160527205912200",            "http://img.blog.csdn.net/20160527205946793",            "http://img.blog.csdn.net/20160527210011184",            "http://img.blog.csdn.net/20160527210026200",            "http://img.blog.csdn.net/20160527210039778",            "http://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布局中使用组合控件。

0 0