前言:
RecyclerView 是Android L版本中新添加的一个用来取代ListView的SDK,它的灵活性与可替代性比listview更好.
多说无益,直接看效果图:
首先项目build.gradle中添加下面依赖:
//图片轮播
implementation 'com.youth.banner:banner:1.4.10'
//注解id
implementation 'com.jakewharton:butterknife:8.8.1'
annotationProcessor 'com.jakewharton:butterknife-compiler:8.8.1'
//列表
implementation 'com.android.support:recyclerview-v7:27.+'
//加载图片
implementation 'com.github.bumptech.glide:glide:4.3.1'
注意:studio3.0以下版本implementation 换成compile
1、全部java代码:
数据源类:DataTestUtils
public class DataTestUtils {
private static String bannerFirst = "https://img.zcool.cn/community/016c355652c7516ac7251c943f32da.jpg";
private static String bannerSecond = "https://img.zcool.cn/community/01881a5652c7516ac7251c94522683.jpg";
private static String bannerThird = "https://img.zcool.cn/community/01c35e5652c76e32f87512f6883563.jpg";
private static String bannerFourth = "https://img.zcool.cn/community/0187da5652c76e32f87512f692d6d1.jpg";
private static String bottomFirst = "https://img.zcool.cn/community/0192ef5548e0ba0000009e320ddbe1.jpg";
private static String bottomSecond = "https://img.zcool.cn/community/0192b7563725ff32f87512f6e14db1.jpg";
private static String bottomThird = "https://a.vpimg2.com/upload/merchandise/236513/AK-1102031400044411-1.jpg";
private static String bottomFourth = "https://img001.hc360.cn/hb/MTQ3NDM5MDAzNjE1Mi0xODU1Njg5MjU4.jpg";
public static HomeDataBean.TypeBanner getBannerData() {
//轮播图链接
List banneUrl = new ArrayList<>();
//轮播图标题
List banneTitle = new ArrayList<>();
//轮播图
HomeDataBean.TypeBanner banner = new HomeDataBean.TypeBanner();
banneUrl.add(bannerFirst);
banneUrl.add(bannerSecond);
banneUrl.add(bannerThird);
banneUrl.add(bannerFourth);
banneTitle.add("凝心聚力,圆您星梦");
banneTitle.add("直播综艺,精彩不断");
banneTitle.add("酷炫礼物,互动不停");
banneTitle.add("边看边买,抢先体验");
banner.setUrls(banneUrl);
banner.setTitles(banneTitle);
return banner;
}
public static HomeDataBean.TypeBrand getBrandData() {
HomeDataBean.TypeBrand brand = new HomeDataBean.TypeBrand();
brand.setPicFirst(bottomFirst);
brand.setPicSecond(bottomSecond);
brand.setPicThird(bottomThird);
brand.setFirstTitle("全新串标 首发");
brand.setSecondTitle("周大福珠宝");
brand.setThirdTitle("秋冬首发");
brand.setFirstLable("串标");
brand.setSecondLable("潮流经典");
brand.setThirdLable("经典");
brand.setFourthLable("全新系列");
brand.setFifthLable("独家");
brand.setSixthLable("顶尖时尚");
return brand;
}
public static HomeDataBean.TypeFocus getFocusData() {
HomeDataBean.TypeFocus focus = new HomeDataBean.TypeFocus();
focus.setTitle("看球最佳音响榜");
focus.setContent("卖爆16.8万件");
focus.setPicFirst(bottomFirst);
focus.setPicSecond(bottomSecond);
focus.setPicThird(bottomThird);
focus.setPicFourth(bottomFirst);
focus.setPicFifth(bottomSecond);
focus.setPicSixth(bottomThird);
focus.setPicSeventh(bottomFourth);
focus.setTitleFirst("家用美容仪榜");
focus.setTitleSecond("卖爆6.1万件");
focus.setTitleThird("高街精致裙子榜");
focus.setTitleFourth("卖爆650件");
focus.setTitleFifth("超值时尚机械榜");
focus.setTitleSixth("卖爆106.8万件");
focus.setTitleSeventh("时尚手表榜");
focus.setTitleEighth("卖爆1.2万件");
return focus;
}
public static HomeDataBean.TypeSelect getSelectData() {
//横向滑动图片集合
List slideUrls = new ArrayList<>();
HomeDataBean.TypeSelect select = new HomeDataBean.TypeSelect();
select.setUrlFirst(bottomFirst);
select.setUrlSecond(bottomSecond);
select.setUrlThird(bottomThird);
for (int i = 0; i < 10; i++) {
slideUrls.add(bottomSecond);
}
select.setUrls(slideUrls);
return select;
}
public static void getBottomData( List
数据实体类HomeDataBean:
public class HomeDataBean {
/**
* 轮播图
*/
public static class TypeBanner {
//轮播连接
private List urls;
//轮播标题
private List titles;
public List getUrls() {
return urls;
}
public void setUrls(List urls) {
this.urls = urls;
}
public List getTitles() {
return titles;
}
public void setTitles(List titles) {
this.titles = titles;
}
}
/**
* 品牌图
*/
public static class TypeBrand {
private String picFirst;
private String firstTitle;
private String firstLable;
private String secondLable;
private String picSecond;
private String secondTitle;
private String thirdLable;
private String fourthLable;
private String picThird;
private String thirdTitle;
private String fifthLable;
private String sixthLable;
public String getPicFirst() {
return picFirst;
}
public void setPicFirst(String picFirst) {
this.picFirst = picFirst;
}
public String getFirstTitle() {
return firstTitle;
}
public void setFirstTitle(String firstTitle) {
this.firstTitle = firstTitle;
}
public String getFirstLable() {
return firstLable;
}
public void setFirstLable(String firstLable) {
this.firstLable = firstLable;
}
public String getSecondLable() {
return secondLable;
}
public void setSecondLable(String secondLable) {
this.secondLable = secondLable;
}
public String getPicSecond() {
return picSecond;
}
public void setPicSecond(String picSecond) {
this.picSecond = picSecond;
}
public String getSecondTitle() {
return secondTitle;
}
public void setSecondTitle(String secondTitle) {
this.secondTitle = secondTitle;
}
public String getThirdLable() {
return thirdLable;
}
public void setThirdLable(String thirdLable) {
this.thirdLable = thirdLable;
}
public String getFourthLable() {
return fourthLable;
}
public void setFourthLable(String fourthLable) {
this.fourthLable = fourthLable;
}
public String getPicThird() {
return picThird;
}
public void setPicThird(String picThird) {
this.picThird = picThird;
}
public String getThirdTitle() {
return thirdTitle;
}
public void setThirdTitle(String thirdTitle) {
this.thirdTitle = thirdTitle;
}
public String getFifthLable() {
return fifthLable;
}
public void setFifthLable(String fifthLable) {
this.fifthLable = fifthLable;
}
public String getSixthLable() {
return sixthLable;
}
public void setSixthLable(String sixthLable) {
this.sixthLable = sixthLable;
}
}
/**
* 榜单
*/
public static class TypeFocus {
private String title;
private String content;
private String picFirst;
private String picSecond;
private String picThird;
private String picFourth;
private String picFifth;
private String picSixth;
private String picSeventh;
private String titleFirst;
private String titleSecond;
private String titleThird;
private String titleFourth;
private String titleFifth;
private String titleSixth;
private String titleSeventh;
private String titleEighth;
public String getTitle() {
return title;
}
public void setTitle(String title) {
this.title = title;
}
public String getContent() {
return content;
}
public void setContent(String content) {
this.content = content;
}
public String getPicFirst() {
return picFirst;
}
public void setPicFirst(String picFirst) {
this.picFirst = picFirst;
}
public String getPicSecond() {
return picSecond;
}
public void setPicSecond(String picSecond) {
this.picSecond = picSecond;
}
public String getPicThird() {
return picThird;
}
public void setPicThird(String picThird) {
this.picThird = picThird;
}
public String getPicFourth() {
return picFourth;
}
public void setPicFourth(String picFourth) {
this.picFourth = picFourth;
}
public String getPicFifth() {
return picFifth;
}
public void setPicFifth(String picFifth) {
this.picFifth = picFifth;
}
public String getPicSixth() {
return picSixth;
}
public void setPicSixth(String picSixth) {
this.picSixth = picSixth;
}
public String getPicSeventh() {
return picSeventh;
}
public void setPicSeventh(String picSeventh) {
this.picSeventh = picSeventh;
}
public String getTitleFirst() {
return titleFirst;
}
public void setTitleFirst(String titleFirst) {
this.titleFirst = titleFirst;
}
public String getTitleSecond() {
return titleSecond;
}
public void setTitleSecond(String titleSecond) {
this.titleSecond = titleSecond;
}
public String getTitleThird() {
return titleThird;
}
public void setTitleThird(String titleThird) {
this.titleThird = titleThird;
}
public String getTitleFourth() {
return titleFourth;
}
public void setTitleFourth(String titleFourth) {
this.titleFourth = titleFourth;
}
public String getTitleFifth() {
return titleFifth;
}
public void setTitleFifth(String titleFifth) {
this.titleFifth = titleFifth;
}
public String getTitleSixth() {
return titleSixth;
}
public void setTitleSixth(String titleSixth) {
this.titleSixth = titleSixth;
}
public String getTitleSeventh() {
return titleSeventh;
}
public void setTitleSeventh(String titleSeventh) {
this.titleSeventh = titleSeventh;
}
public String getTitleEighth() {
return titleEighth;
}
public void setTitleEighth(String titleEighth) {
this.titleEighth = titleEighth;
}
}
/**
* 精选
*/
public static class TypeSelect {
private String urlFirst;
private String urlSecond;
private String urlThird;
public String getUrlFirst() {
return urlFirst;
}
public void setUrlFirst(String urlFirst) {
this.urlFirst = urlFirst;
}
public String getUrlSecond() {
return urlSecond;
}
public void setUrlSecond(String urlSecond) {
this.urlSecond = urlSecond;
}
public String getUrlThird() {
return urlThird;
}
public void setUrlThird(String urlThird) {
this.urlThird = urlThird;
}
//横向滑动的图片
private List urls;
public List getUrls() {
return urls;
}
public void setUrls(List urls) {
this.urls = urls;
}
}
/**
* 精选
*/
public static class TypeBottom {
private String url;
private String title;
private String content;
private double price;
public String getUrl() {
return url;
}
public void setUrl(String url) {
this.url = url;
}
public String getTitle() {
return title;
}
public void setTitle(String title) {
this.title = title;
}
public String getContent() {
return content;
}
public void setContent(String content) {
this.content = content;
}
public double getPrice() {
return price;
}
public void setPrice(double price) {
this.price = price;
}
public TypeBottom(String url, String title, String content, double price) {
this.url = url;
this.title = title;
this.content = content;
this.price = price;
}
}
}
轮播图Banner图片加载器GlideImageLoader:
public class GlideImageLoader extends ImageLoader {
@Override
public void displayImage(Context context, Object path, ImageView imageView) {
Glide.with(context).load(path).into(imageView);
}
}
首页适配器HomeAdapter:
public class HomeAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
//所有要展示的数据源object集合
private List
主界面MainActivity:
public class MainActivity extends AppCompatActivity {
@BindView(R.id.recycler)
RecyclerView recyclerView;
//总数据源
private List mObjects;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ButterKnife.bind(this);
initData();
}
/**
* 初始化数据源
*/
private void initData() {
if (mObjects == null) {
mObjects = new ArrayList<>();
}
//设置轮播图数据
mObjects.add(DataTestUtils.getBannerData());
//设置品牌
mObjects.add(DataTestUtils.getBrandData());
//设置榜单
mObjects.add(DataTestUtils.getFocusData());
//设置榜单
mObjects.add(DataTestUtils.getSelectData());
//设置底部数据
DataTestUtils.getBottomData(mObjects);
HomeAdapter adapter = new HomeAdapter(this, mObjects);
recyclerView.setLayoutManager(new LinearLayoutManager(this));
recyclerView.setAdapter(adapter);
}
}
2、所有布局代码:
activity_main.xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:background="#f0f0f0"
android:id="@+id/recycler"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
LinearLayout>
home_item_select_pic.xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_marginTop="20px"
android:paddingRight="20px">
<ImageView
android:id="@+id/item_detail_image"
android:layout_width="250px"
android:layout_height="250px"
android:scaleType="centerCrop" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="10px"
android:layout_marginTop="10px"
android:text="商品标题" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="¥ 99.9"
android:textColor="#f00" />
LinearLayout>
test_item_banner.xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ffffff"
android:orientation="vertical">
<com.youth.banner.Banner
android:id="@+id/banner"
android:layout_width="match_parent"
android:layout_height="600px" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="35px">
<TextView
android:gravity="center"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="大牌制造商出品" />
<TextView
android:gravity="center"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="七天无忧退货" />
<TextView
android:gravity="center"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="全平台包邮" />
LinearLayout>
LinearLayout>
test_item_bottom_item.xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:background="#fff"
android:orientation="horizontal"
android:padding="20px">
<ImageView
android:id="@+id/item_url"
android:layout_width="320px"
android:layout_height="320px"
android:scaleType="centerCrop" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="30px">
<TextView
android:id="@+id/item_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="商品标题"
android:textSize="46px" />
<TextView
android:id="@+id/item_content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="30px"
android:layout_marginTop="30px"
android:text="商品内容"
android:textSize="40px" />
<TextView
android:id="@+id/item_price"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10px"
android:text="Y 150.99"
android:textColor="#FF0000"
android:textSize="36px" />
LinearLayout>
LinearLayout>
test_item_brand.xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#fff"
android:layout_marginTop="50px"
android:orientation="vertical"
android:padding="20px">
<TextView
android:id="@+id/home_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="50px"
android:text="标题"
android:textSize="46px"
android:textStyle="bold" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="375px"
android:layout_marginTop="20px"
android:orientation="horizontal">
<RelativeLayout style="@style/linear_focus_one">
<ImageView
android:scaleType="centerCrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/brand_pic_first" />
<LinearLayout style="@style/brand_linear">
<TextView
android:id="@+id/brand_first_title"
style="@style/focus_text"
android:text="独特设计 片假名系列" />
<LinearLayout style="@style/brand_linear_one">
<TextView
android:id="@+id/brand_first_lable"
style="@style/focus_text_one"
android:text="限量" />
<TextView
android:id="@+id/brand_second_lable"
style="@style/focus_text_one"
android:layout_marginLeft="20px"
android:text="浪潮尖货" />
LinearLayout>
LinearLayout>
RelativeLayout>
<RelativeLayout
style="@style/linear_focus_one"
android:layout_marginLeft="20px"
android:layout_marginRight="20px">
<ImageView
android:scaleType="centerCrop"
android:id="@+id/brand_pic_second"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<LinearLayout style="@style/brand_linear">
<TextView
android:id="@+id/brand_second_title"
style="@style/focus_text"
android:text="独特设计 片假名系列" />
<LinearLayout style="@style/brand_linear_one">
<TextView
android:id="@+id/brand_third_lable"
style="@style/focus_text_one"
android:text="限量" />
<TextView
android:id="@+id/brand_fourth_lable"
style="@style/focus_text_one"
android:layout_marginLeft="20px"
android:text="浪潮尖货" />
LinearLayout>
LinearLayout>
RelativeLayout>
<RelativeLayout style="@style/linear_focus_one">
<ImageView
android:scaleType="centerCrop"
android:id="@+id/brand_pic_third"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<LinearLayout style="@style/brand_linear">
<TextView
android:id="@+id/brand_third_title"
style="@style/focus_text"
android:text="独特设计 片假名系列" />
<LinearLayout style="@style/brand_linear_one">
<TextView
android:id="@+id/brand_fifth_lable"
style="@style/focus_text_one"
android:text="限量" />
<TextView
android:id="@+id/brand_sixth_lable"
style="@style/focus_text_one"
android:layout_marginLeft="20px"
android:text="浪潮尖货" />
LinearLayout>
LinearLayout>
RelativeLayout>
LinearLayout>
LinearLayout>
test_item_focus.xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="50px"
android:background="#fff"
android:orientation="vertical"
android:padding="20px">
<TextView
android:id="@+id/home_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="50px"
android:text="标题"
android:textSize="46px"
android:textStyle="bold" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="20px"
android:gravity="center_vertical"
android:orientation="horizontal">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginLeft="20px"
android:layout_marginRight="100px"
android:orientation="vertical">
<TextView
style="@style/focus_two"
android:text="人气榜" />
<TextView
android:id="@+id/fouces_title"
style="@style/focus_two"
android:layout_marginTop="30px"
android:text="看球必备音响榜" />
<TextView
android:id="@+id/fouces_content"
style="@style/focus_one"
android:text="卖爆1.1万件"
android:textSize="34px" />
LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="6"
android:orientation="horizontal"
android:padding="20px">
<ImageView
android:id="@+id/fouces_pic_first"
style="@style/focus_image_one" />
<ImageView
android:id="@+id/fouces_pic_second"
style="@style/focus_image_one" />
<ImageView
android:id="@+id/fouces_pic_third"
style="@style/focus_image_one" />
LinearLayout>
LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
style="@style/linear_focus"
android:layout_marginRight="20px">
<LinearLayout style="@style/linear_focus_one">
<TextView
android:id="@+id/fouces_title_first"
style="@style/focus_two"
android:text="卖爆1.1万件" />
<TextView
android:id="@+id/fouces_title_second"
style="@style/focus_one"
android:text="你喜欢的商品上榜了" />
LinearLayout>
<ImageView
android:id="@+id/fouces_pic_fourth"
android:layout_width="150px"
android:layout_height="150px"
android:scaleType="centerCrop" />
LinearLayout>
<LinearLayout style="@style/linear_focus">
<LinearLayout style="@style/linear_focus_one">
<TextView
android:id="@+id/fouces_title_third"
style="@style/focus_two"
android:text="卖爆1.1万件" />
<TextView
android:id="@+id/fouces_title_fourth"
style="@style/focus_one"
android:text="你喜欢的商品上榜了" />
LinearLayout>
<ImageView
android:id="@+id/fouces_pic_fifth"
android:layout_width="150px"
android:layout_height="150px"
android:scaleType="centerCrop" />
LinearLayout>
LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20px"
android:orientation="horizontal">
<LinearLayout
style="@style/linear_focus"
android:layout_marginRight="20px">
<LinearLayout style="@style/linear_focus_one">
<TextView
android:id="@+id/fouces_title_fifth"
style="@style/focus_two"
android:text="卖爆1.1万件" />
<TextView
android:id="@+id/fouces_title_sixth"
style="@style/focus_one"
android:text="你喜欢的商品上榜了" />
LinearLayout>
<ImageView
android:id="@+id/fouces_pic_sixth"
android:layout_width="150px"
android:layout_height="150px"
android:scaleType="centerCrop" />
LinearLayout>
<LinearLayout style="@style/linear_focus">
<LinearLayout style="@style/linear_focus_one">
<TextView
android:id="@+id/fouces_title_seventh"
style="@style/focus_two"
android:text="卖爆1.1万件" />
<TextView
android:id="@+id/fouces_title_eighth"
style="@style/focus_one"
android:text="你喜欢的商品上榜了" />
LinearLayout>
<ImageView
android:id="@+id/fouces_pic_seventh"
android:layout_width="150px"
android:layout_height="150px"
android:scaleType="centerCrop" />
LinearLayout>
LinearLayout>
LinearLayout>
test_item_select.xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#fff"
android:layout_marginTop="50px"
android:orientation="vertical"
android:padding="20px">
<TextView
android:id="@+id/home_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="50px"
android:text="标题"
android:textSize="46px"
android:textStyle="bold" />
<LinearLayout
android:layout_marginTop="20px"
android:layout_width="match_parent"
android:layout_height="480px"
android:orientation="horizontal">
<ImageView
android:scaleType="centerCrop"
android:id="@+id/item_select_first"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginRight="20px"
android:layout_weight="1" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<ImageView
android:scaleType="centerCrop"
android:id="@+id/item_select_second"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<ImageView
android:scaleType="centerCrop"
android:id="@+id/item_select_third"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginTop="20px"
android:layout_weight="1" />
LinearLayout>
LinearLayout>
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:scrollbars="none">
<LinearLayout
android:id="@+id/linear_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:orientation="horizontal" />
HorizontalScrollView>
LinearLayout>
3、资源文件
brand_shape.xml:
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners
android:bottomLeftRadius="10px"
android:bottomRightRadius="10px" />
<solid android:color="#77000000" />
shape>
style样式: