商城之首页商品分类

最新推荐文章于 2024-01-31 13:47:06 发布
最新推荐文章于 2024-01-31 13:47:06 发布
阅读量1.4k 收藏 1
点赞数
分类专栏： Android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012360634/article/details/52729567
版权

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


liguangjiehao
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android 仿京东、拼多多商品分类页的示例代码
08-29
本篇文章主要介绍了Android 仿京东、拼多多商品分类页的示例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
android京东商城一级分类到二级分类的滑动效果,Android仿京东分类模块左侧分类条目效果...
weixin_42601608的博客
05-25 603
本文实例为大家分享了Android仿京东左侧分类条目效果的具体代码，供大家参考，具体内容如下import android.app.Activity;import android.os.Bundle;import android.view.View;import android.widget.LinearLayout;import android.widget.ScrollView;import a...
【Android】高仿京东三级类型列表Demo
最新发布
butterfly_new的博客
01-31 1255
高仿京东三级类型列表demo
尚硅谷2020微服务分布式电商项目《谷粒商城》-首页商品分类
a2522827931的博客
07-03 981
欢迎访问加群：1107019965，学习更多的知识 1. 门户首页商品分类 搜索做完之后，把目光移动首页，首页最重要的模块之一便是商品分类，商品分类也是进入商品列表，找到心仪商品的另一个主要途径。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ffx2CaPZ-1593743187096)(assets/1568101575193.png)] 接下来就搭建一个module。这个页面作为整个商城的门户入口，访问量巨大，为了方便优化扩展，需要搭建独立的系统。 1.1. 创建首
Android Studio实现功能强大的购物商城App
热门推荐
振华OPPO的博客世界
11-14 4万+
本次项目是现在软件商店很流行的购物商城APP，现在万物互联的时代，网上shopping早已经是大家的习惯了。足不出户地选择自己想要的商品进行购买多么地方便，这就促使了这款购物商城APP的出现。它具有底部导航栏，有首页、分类、发现、购物车和个人中心五个选项卡，每个选项卡功能都很丰富，资源文件都是放在Tomcat服务器里面的，直接调用就行。总体来说是非常好的实战项目。
android+京东分类菜单,Android仿京东商品分类
weixin_31455121的博客
05-26 950
一.效果图 二.布局文件activity_main.xml布局中left_item.xml布局中在right_item.xml布局中在rigth_item_child.xml在MainActivity.java中public class MainActivity extends AppCompatActivity implements ILeftview, IRightview {private...
淘宝商城商品分类特效
06-11
商城做的一个很high的效果，适合企业产品展示。 鼠标移动上去后将底部原本隐藏的内容显示出来，鼠标移走后又隐藏，不仅节约了网页空间，而且还产生了一定的美观效果
仿京东商城商品分类菜单源代码
03-18
仿京东商城商品分类菜单
微信小程序商城项目之商品属性分类（4）
08-30
主要为大家详细介绍了微信小程序商城项目之商品属性值联动选择,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
京东商城商品分类数据.xlsx
04-08
京东商城商品分类数据
jQuery商城网站商品分类导航菜单代码
10-04
jQuery商城网站商品分类导航菜单代码 jQuery商城网站商品分类导航菜单代码
android 仿京东购物商城分类视图
11-10
android 仿京东购物商城分类视图,android studio 2.2项目 对应文章看这里： http://blog.csdn.net/stzy00/article/details/47959075
Android 商城 二级分类
09-18
Android仿京东商城二级分类，listview，gridview
商城类APP的商品分类页面实现，使用RecyclerView结合GridLayout减少嵌套
06-26
商城类APP的商品分类页面实现，使用RecyclerView结合GridLayout减少嵌套
仿淘宝商品属性分类
12-12
想要看界面的 http://blog.csdn.net/u010924834/article/details/50353955这是界面效果 我制作的下边的分类效果
android 仿京东商品三级分类简单实例
11-28
使用简单的方法实现类似京东商品三级分类、没有加特效和动画。
android 商品左右分类,Android仿京东左右分类
weixin_29375669的博客
05-28 645
【实例简介】最近看到很多购物商城都是采用了一种布局，左边是list列表右侧是商品的列表【实例截图】【核心代码】listviewFragmentDemo├── listviewFragmentDemo│ ├── AndroidManifest.xml│ ├── bin│ │ ├── AndroidManifest.xml│ │ ├── classes│ │ │ └...
Android练手完整项目app（三）商品分类+流式布局Tag
m0_51282960的博客
02-03 727
Android 练手完整项目app(三) 流式布局分类多个标签
django实现网上商城左侧垂直商品分类菜单代码
10-14
在Django中实现网上商城的左侧垂直商品分类菜单，可以按照以下步骤进行操作： 1. 创建商品分类模型类：在Django的models.py文件中创建一个商品分类模型类，例如： ``` from django.db import models class ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值