【安卓-自定义布局】安卓App开发思路 一步一个脚印（十二）实现自定义左右滚动的信息块-仿蘑菇街

实现自定义左右滚动的信息块-仿蘑菇街

      这种左右滚动的内容，在很多常见的o2o 什么p2p c2c o2c c2o p2c c2p 各种软件中比较常见，譬如蘑菇街的

   

这种布局就是将LinearLayout嵌套在HorizontalScrollView中，实现的原理就好像GridView中嵌套了ItemView那种思路，

整体布局思路为

<HorizontalScrollView
    android:background="@color/white"
    android:layout_width="match_parent"
    android:layout_height="140dp"
    android:scrollbars="none">
    <LinearLayout
        android:id="@+id/linearlayout_xscrolltuan"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

    </LinearLayout>
</HorizontalScrollView>

item布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="3dp">
        <ImageView
            android:id="@+id/iv_xscrolltuanpic"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/tuan_heng_p1"/>
        <TextView
            android:id="@+id/tv_xscrolltuandesc"
            android:layout_width="100dp"
            android:layout_height="wrap_content"
            android:text="456465645"
            />
        <TextView
            android:id="@+id/tv_xscrolltuanprice"
            android:layout_width="100dp"
            android:layout_height="wrap_content"
            android:text="222"
            />
    </LinearLayout>
</LinearLayout>

实现的java代码思路

//横向滚动的团购 信息 商品文字
private String mTuanScrollText[] = new String[]{"去黑眼圈去眼袋啦啦啦啦啦","男士气垫运动鞋啦啦啦啦啦","撞色个性链条手啦啦啦啦啦","【必抢】韩版休啦啦啦啦啦","送船袜圆头内增啦啦啦啦啦",
   "【两件套】毛衣+啦啦啦啦啦","blings名媛秘密啦啦啦啦啦","必抢 秋季新款啦啦啦啦啦","拍下送鞋垫袜子啦啦啦啦啦","2016新款拼接时啦啦啦啦啦",
        "可爱绣线双肩包啦啦啦啦啦","秋季新品收腰荷啦啦啦啦啦","中长款灯笼袖厚啦啦啦啦啦","衣服加裤子一套88啦啦啦啦啦","韩版弹力收腰显啦啦啦啦啦",
        "新品高腰显瘦破啦啦啦啦啦","阿道夫500ml*2啦啦啦啦啦","爆款返场决明子啦啦啦啦啦","秋季新品韩范大啦啦啦啦啦","优成 175抽8包啦啦啦啦啦"};

//横向滚动的团购 信息 商品图片id
private int mTuanScrollPic[] = new int[]{R.mipmap.tuan_heng_p1,R.mipmap.tuan_heng_p2,R.mipmap.tuan_heng_p3,R.mipmap.tuan_heng_p4,R.mipmap.tuan_heng_p5,
        R.mipmap.tuan_heng_p6,R.mipmap.tuan_heng_p7,R.mipmap.tuan_heng_p8,R.mipmap.tuan_heng_p9,R.mipmap.tuan_heng_p10,
        R.mipmap.tuan_heng_p11,R.mipmap.tuan_heng_p12,R.mipmap.tuan_heng_p13,R.mipmap.tuan_heng_p14,R.mipmap.tuan_heng_p15,
        R.mipmap.tuan_heng_p16,R.mipmap.tuan_heng_p17,R.mipmap.tuan_heng_p18,R.mipmap.tuan_heng_p19,R.mipmap.tuan_heng_p20};

//横向滚动的团购 信息 商品价格
private String mTuanScrollPrice[] = new String[]{"39.90","59.00","35.00","35.00","45.00",
        "59.90","199.90","49.00","45.00","69.00",
        "49.50","59.00","46.80","88.00","65.00",
        "39.90","63.90","19.80","39.90","18.00",};

for (int i =0 ; i<mTuanScrollPic.length;i++){
    View mView =   getActivity().getLayoutInflater().inflate(R.layout.item_xscrolltuan,null);
    ImageView imageView= (ImageView) mView.findViewById(R.id.iv_xscrolltuanpic);
    TextView textViewDesc= (TextView) mView.findViewById(R.id.tv_xscrolltuandesc);
    TextView textViewPrice= (TextView) mView.findViewById(R.id.tv_xscrolltuanprice);

    imageView.setImageResource(mTuanScrollPic[i]);
    textViewDesc.setText(mTuanScrollText[i]);
    textViewPrice.setText(mTuanScrollPrice[i]);
    mLinearLayout.addView(mView);
}

像这样子，将当个的item 放入到之前的linearlayout中，那么就可以实现了。

是不是很简单呢？