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();
}
}