商城之首页商品分类

来源：互联网发布：java工程发布到tomcat 编辑：程序博客网时间：2024/04/30 10:42

1.效果图

实现：RecycleView + CardView

2.CardView的使用

CardView: http://blog.csdn.net/u012360634/article/details/53184472

(0)CardView

1.CardView :设置阴影，圆角，等等。。 ,cardview其实继承的是Fraglayout
   cardView.setRadius(8);//设置图片圆角的半径大小
   cardView.setCardElevation(8);//设置阴影部分大小
   cardView.setContentPadding(5,5,5,5);//设置图片距离阴影大小

(1)gradle添加引用

compile 'com.android.support:cardview-v7:23.0.1'

????? app

<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:layout_gravity="center"    android:gravity="center"    app:cardBackgroundColor="#fff"    app:cardCornerRadius="4dp"    app:contentPadding="10dp"></android.support.v7.widget.CardView>

(2)template_home_cardview.xml---------第一种item布局

<?xml version="1.0" encoding="utf-8"?><android.support.v7.widget.CardView    xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:layout_gravity="center"    android:gravity="center"    android:layout_width="match_parent"    android:layout_height="wrap_content"    app:cardBackgroundColor="#fff"    app:contentPadding="10dp"    app:cardCornerRadius="4dp">    <LinearLayout        android:orientation="vertical"        android:layout_width="match_parent"        android:layout_height="wrap_content">        <TextView            android:id="@+id/text_title"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:text="热门活动"            android:textSize="20dp"            android:textColor="@color/black"            android:paddingTop="10dp"            />        <View            style="@style/line_vertical"            android:layout_marginBottom="10dp"            android:layout_marginTop="10dp"></View>        <LinearLayout            android:orientation="horizontal"            android:layout_width="match_parent"            android:layout_height="wrap_content">            <ImageView                android:id="@+id/imgview_big"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                />            <View                android:id="@+id/line"                style="@style/line_horizontal"                />            <LinearLayout                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:orientation="vertical"                >                <ImageView                    android:id="@+id/imgview_small_top"                    android:layout_width="wrap_content"                    android:layout_height="wrap_content"                    />                <View                    android:id="@+id/line2"                    style="@style/line_vertical"                    ></View>                <ImageView                    android:id="@+id/imgview_small_bottom"                    android:layout_width="wrap_content"                    android:layout_height="wrap_content"                    />            </LinearLayout>        </LinearLayout>    </LinearLayout></android.support.v7.widget.CardView>

(3)template_home_cardview2.xml ---第二种布局

<?xml version="1.0" encoding="utf-8"?><android.support.v7.widget.CardView    xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:layout_gravity="center"    android:gravity="center"    android:layout_width="match_parent"    android:layout_height="wrap_content"    app:cardBackgroundColor="#fff"    app:contentPadding="10dp"    app:cardCornerRadius="4dp">    <LinearLayout        android:orientation="vertical"        android:layout_width="match_parent"        android:layout_height="wrap_content">        <TextView            android:id="@+id/text_title"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:text="热门活动"            android:textSize="20dp"            android:textColor="@color/black"            android:paddingTop="10dp"            />        <View            style="@style/line_vertical"            android:layout_marginBottom="10dp"            android:layout_marginTop="10dp"></View>        <LinearLayout            android:orientation="horizontal"            android:layout_width="match_parent"            android:layout_height="wrap_content">            <LinearLayout                android:id="@+id/layout_left"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:orientation="vertical"                >                <ImageView                    android:id="@+id/imgview_small_top"                    android:layout_width="wrap_content"                    android:layout_height="wrap_content"                    android:src="@drawable/img_0_small1"                    />                <View                    android:id="@+id/line2"                    style="@style/line_vertical"                    ></View>                <ImageView                    android:id="@+id/imgview_small_bottom"                    android:layout_width="wrap_content"                    android:layout_height="wrap_content"                    android:src="@drawable/img_0_small2"                    />            </LinearLayout>            <View                android:id="@+id/line"                style="@style/line_horizontal"                android:layout_marginLeft="5dp"                android:layout_marginRight="5dp"                />            <ImageView                android:id="@+id/imgview_big"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:src="@drawable/img_big_0"                />        </LinearLayout>    </LinearLayout></android.support.v7.widget.CardView>

(4)fragment_home.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:custom="http://schemas.android.com/apk/res-auto"    android:orientation="vertical"    android:layout_width="match_parent"    android:layout_height="match_parent">    <com.daimajia.slider.library.SliderLayout        android:id="@+id/slider"        android:layout_width="match_parent"        android:layout_height="200dp"        />    <!--<com.daimajia.slider.library.Indicators.PagerIndicator-->        <!--android:id="@+id/custom_indicator"-->        <!--android:layout_width="wrap_content"-->        <!--android:layout_height="wrap_content"-->        <!--android:gravity="center"-->        <!--custom:selected_color="#FF5500"-->        <!--custom:unselected_color="#55333333"-->        <!--custom:shape="rect"-->        <!--custom:selected_padding_left="2dp"-->        <!--custom:selected_padding_right="2dp"-->        <!--custom:unselected_padding_left="2dp"-->        <!--custom:unselected_padding_right="2dp"-->        <!--custom:selected_width="16dp"-->        <!--custom:selected_height="3dp"-->        <!--custom:unselected_width="16dp"-->        <!--custom:unselected_height="3dp"-->        <!--android:layout_gravity="center"-->        <!--/>-->    <android.support.v7.widget.RecyclerView        android:id="@+id/recyclerview"        android:layout_width="match_parent"        android:layout_height="wrap_content">    </android.support.v7.widget.RecyclerView></LinearLayout>

(5)HomeCatgoryAdapter

package cniao5.com.cniao5shop.adapter;import android.support.v7.widget.RecyclerView;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.ImageView;import android.widget.TextView;import java.util.List;import cniao5.com.cniao5shop.R;import cniao5.com.cniao5shop.bean.HomeCategory;/** * Created by Ivan on 15/9/30. */public class HomeCatgoryAdapter extends RecyclerView.Adapter<HomeCatgoryAdapter.ViewHolder> {    private  static int VIEW_TYPE_L=0;    private  static int VIEW_TYPE_R=1;    private LayoutInflater mInflater;    private List<HomeCategory> mDatas;//传数据    public HomeCatgoryAdapter(List<HomeCategory> datas){        mDatas = datas;    }    @Override    public ViewHolder onCreateViewHolder(ViewGroup viewGroup, int type) {        //type由getItemViewType返回        mInflater = LayoutInflater.from(viewGroup.getContext());//根据不同的下标显示不同的布局        if(type == VIEW_TYPE_R){            return  new ViewHolder(mInflater.inflate(R.layout.template_home_cardview2,viewGroup,false));        }        return  new ViewHolder(mInflater.inflate(R.layout.template_home_cardview,viewGroup,false));    }    @Override    public void onBindViewHolder(ViewHolder viewHolder, int i) {        //绑定数据        HomeCategory category = mDatas.get(i);        viewHolder.textTitle.setText(category.getName());        viewHolder.imageViewBig.setImageResource(category.getImgBig());        viewHolder.imageViewSmallTop.setImageResource(category.getImgSmallTop());        viewHolder.imageViewSmallBottom.setImageResource(category.getImgSmallBottom());    }    @Override    public int getItemCount() {        return mDatas.size();    }//获取item的下标    @Override    public int getItemViewType(int position) {        if(position % 2==0){            return  VIEW_TYPE_R;        }        else return VIEW_TYPE_L;    }    static  class ViewHolder extends RecyclerView.ViewHolder{        TextView textTitle;        ImageView imageViewBig;        ImageView imageViewSmallTop;        ImageView imageViewSmallBottom;        public ViewHolder(View itemView) {            super(itemView);            textTitle = (TextView) itemView.findViewById(R.id.text_title);            imageViewBig = (ImageView) itemView.findViewById(R.id.imgview_big);            imageViewSmallTop = (ImageView) itemView.findViewById(R.id.imgview_small_top);            imageViewSmallBottom = (ImageView) itemView.findViewById(R.id.imgview_small_bottom);        }    }}

(6)DividerItemDecortion 分割线

package cniao5.com.cniao5shop.adapter;import android.graphics.Canvas;import android.graphics.Rect;import android.support.v7.widget.LinearLayoutManager;import android.support.v7.widget.RecyclerView;import android.view.View;public class DividerItemDecortion extends RecyclerView.ItemDecoration {    @Override    public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {        super.onDraw(c, parent, state);    }    @Override    public void onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state) {        super.onDrawOver(c, parent, state);    }    @Override    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {        int layoutOrientation = getOrientation(parent);        if (layoutOrientation == LinearLayoutManager.VERTICAL) {            outRect.top = 10;            outRect.left=5;            outRect.right=5;        } else if(layoutOrientation == LinearLayoutManager.HORIZONTAL) {            outRect.left = 5;        }    }    private int getOrientation(RecyclerView parent) {        if (parent.getLayoutManager() instanceof LinearLayoutManager) {            LinearLayoutManager layoutManager = (LinearLayoutManager) parent.getLayoutManager();            return layoutManager.getOrientation();        } else throw new IllegalStateException("DividerItemDecoration can only be used with a LinearLayoutManager.");    }}

7.HomeFragment.java

package cniao5.com.cniao5shop.fragment;import android.os.Bundle;import android.support.annotation.Nullable;import android.support.v4.app.Fragment;import android.support.v7.widget.LinearLayoutManager;import android.support.v7.widget.RecyclerView;import android.util.Log;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.Toast;import com.daimajia.slider.library.Animations.DescriptionAnimation;import com.daimajia.slider.library.Indicators.PagerIndicator;import com.daimajia.slider.library.SliderLayout;import com.daimajia.slider.library.SliderTypes.BaseSliderView;import com.daimajia.slider.library.SliderTypes.DefaultSliderView;import com.daimajia.slider.library.SliderTypes.TextSliderView;import com.daimajia.slider.library.Tricks.ViewPagerEx;import java.util.ArrayList;import java.util.List;import cniao5.com.cniao5shop.R;import cniao5.com.cniao5shop.adapter.DividerItemDecortion;import cniao5.com.cniao5shop.adapter.HomeCatgoryAdapter;import cniao5.com.cniao5shop.bean.HomeCategory;/** * Created by Ivan on 15/9/25. */public class HomeFragment extends Fragment {    private SliderLayout mSliderLayout;//    private PagerIndicator  indicator;    private RecyclerView mRecyclerView;    private HomeCatgoryAdapter mAdatper;    private static  final  String TAG="HomeFragment";    @Nullable    @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {        View view = inflater.inflate(R.layout.fragment_home,container,false);        mSliderLayout = (SliderLayout) view.findViewById(R.id.slider);//        indicator= (PagerIndicator) view.findViewById(R.id.custom_indicator);        initSlider();        initRecyclerView(view);        return  view;    }    private void initRecyclerView(View view) {        mRecyclerView = (RecyclerView) view.findViewById(R.id.recyclerview);        List<HomeCategory> datas = new ArrayList<>(15);        HomeCategory category = new HomeCategory("热门活动",R.drawable.img_big_1,R.drawable.img_1_small1,R.drawable.img_1_small2);        datas.add(category);        category = new HomeCategory("有利可图",R.drawable.img_big_4,R.drawable.img_4_small1,R.drawable.img_4_small2);        datas.add(category);        category = new HomeCategory("品牌街",R.drawable.img_big_2,R.drawable.img_2_small1,R.drawable.img_2_small2);        datas.add(category);        category = new HomeCategory("金融街 包赚翻",R.drawable.img_big_1,R.drawable.img_3_small1,R.drawable.imag_3_small2);        datas.add(category);        category = new HomeCategory("超值购",R.drawable.img_big_0,R.drawable.img_0_small1,R.drawable.img_0_small2);        datas.add(category);        mAdatper = new HomeCatgoryAdapter(datas);        mRecyclerView.setAdapter(mAdatper);        mRecyclerView.addItemDecoration(new DividerItemDecortion());        mRecyclerView.setLayoutManager(new LinearLayoutManager(this.getActivity()));    }    private void initSlider(){        DefaultSliderView textSliderView = new DefaultSliderView(this.getActivity());        textSliderView.image("http://m.360buyimg.com/mobilecms/s480x180_jfs/t2278/35/409524152/232719/1d29f7a9/56078dbfNae4f16a3.jpg");        textSliderView.description("aaaa");        textSliderView.setScaleType(BaseSliderView.ScaleType.Fit);        DefaultSliderView textSliderView2 = new DefaultSliderView(this.getActivity());        textSliderView2.image("http://m.360buyimg.com/mobilecms/s480x180_jfs/t2071/116/426908452/111248/3e6d388c/5608a437N723ee2ba.jpg");        textSliderView2.description("bbbb");        textSliderView2.setScaleType(BaseSliderView.ScaleType.Fit);        DefaultSliderView textSliderView3 = new DefaultSliderView(this.getActivity());        textSliderView3.image("http://m.360buyimg.com/mobilecms/s480x180_jfs/t2113/230/413819408/114393/d8a62616/56078bacN9c9c6dc8.jpg");        textSliderView3.description("秒杀");        textSliderView3.setScaleType(BaseSliderView.ScaleType.Fit);        mSliderLayout.addSlider(textSliderView);        mSliderLayout.addSlider(textSliderView2);        mSliderLayout.addSlider(textSliderView3);        mSliderLayout.setPresetIndicator(SliderLayout.PresetIndicators.Center_Bottom);//        mSliderLayout.setCustomIndicator(indicator);        mSliderLayout.setCustomAnimation(new DescriptionAnimation());        mSliderLayout.setPresetTransformer(SliderLayout.Transformer.RotateUp);        mSliderLayout.setDuration(3000);        mSliderLayout.addOnPageChangeListener(new ViewPagerEx.OnPageChangeListener() {            @Override            public void onPageScrolled(int i, float v, int i1) {                Log.d(TAG,"onPageScrolled");            }            @Override            public void onPageSelected(int i) {                Log.d(TAG,"onPageSelected");            }            @Override            public void onPageScrollStateChanged(int i) {                Log.d(TAG,"onPageScrollStateChanged");            }        });    }    @Override    public void onDestroy() {        super.onDestroy();        mSliderLayout.stopAutoCycle();    }}

0 0