今天我们看一下这个控件
我们使用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+ Html的方法来自定义文字的样式和颜色。想学习的这个。这不是今天的重点。
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类自定义组合控件。
- 在自定义组合控件的构造方法中通过LayoutInflater加载组合布局。
在xml布局中使用组合控件。