结合DrawerLayout+CoordinatorLayout+MagicIndicator+ViewPager实现仿京东，淘宝商城页面

2024年5月8日 互联网

我要实现的效果

效果包含的功能

  • 滑动标题渐变
  • 滑动页面，MagicIndicator吸顶功能
  • 自定义MagicIndicator渐变色的指示器
  • 抽屉菜单

功能用到的控件以及代码解析

  • 抽屉菜单DrawerLayout

  1. 外层是DrawerLayout，第一个子view是主内容区，这里我用include来加载侧滑菜单布局
  2. 在菜单布局中，必须设置android:layout_gravity="right"，或者left，来对应Activity中的侧滑方向，比如我在代码 中设置left， drawerlayout.openDrawer(GravityCompat.START);如果设置right， drawerlayout.openDrawer(GravityCompat.END);

  • CoordinatorLayout 

  1. CoordinatorLayout是协调布局，通过该布局可以实现折叠悬浮效果，这里也可以结合其他控件使用，这里不多做解释
  2. 参考https://www.jianshu.com/p/eec5a397ce79，很详细
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"android:id="@+id/drawerlayout"android:layout_width="match_parent"android:layout_height="match_parent"><!--主内容区--><android.support.design.widget.CoordinatorLayoutxmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:background="@color/white"android:orientation="vertical"tools:context=".activity.TextMyActivity"><!--AppBarLayout必须为CoordinatorLayout的直接子View--><android.support.design.widget.AppBarLayoutandroid:id="@+id/appBarLayout"android:layout_width="match_parent"android:layout_height="wrap_content"app:elevation="0dp"android:background="@android:color/white"><android.support.design.widget.CollapsingToolbarLayoutandroid:id="@+id/collapsing_toolbar_layout"android:layout_width="match_parent"android:layout_height="match_parent"android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"app:layout_scrollFlags="scroll|exitUntilCollapsed"><RelativeLayoutandroid:id="@+id/rl_top"android:layout_width="match_parent"android:layout_height="wrap_content"android:background="@drawable/test_server_bg"><LinearLayoutandroid:id="@+id/ll_earch"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginTop="@dimen/dp_30"android:gravity="center_vertical"android:orientation="horizontal"><ImageViewandroid:id="@+id/iv_back"android:layout_width="wrap_content"android:layout_height="wrap_content"android:padding="@dimen/dp_13"android:src="@drawable/back_white" /><LinearLayoutandroid:layout_width="match_parent"android:layout_height="@dimen/dp_32"android:layout_weight="1"android:background="@drawable/trans_search"android:orientation="horizontal"></LinearLayout><ImageViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:padding="@dimen/dp_13"android:src="@drawable/share_white" /></LinearLayout><RelativeLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_below="@id/ll_earch"android:layout_marginLeft="@dimen/dp_13"android:layout_marginTop="@dimen/dp_10"android:layout_marginRight="@dimen/dp_13"android:layout_marginBottom="@dimen/dp_8"><de.hdodenhof.circleimageview.CircleImageViewandroid:id="@+id/profile_image"android:layout_width="52dp"android:layout_height="52dp" /><TextViewandroid:id="@+id/profile_title"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginLeft="10dp"android:layout_marginTop="@dimen/dp_10"android:layout_toRightOf="@id/profile_image"android:textColor="@color/white"android:textSize="@dimen/sp_14"android:textStyle="bold" /><TextViewandroid:id="@+id/profile_content"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_below="@id/profile_title"android:layout_marginLeft="10dp"android:layout_marginTop="@dimen/dp_5"android:layout_toRightOf="@id/profile_image"android:textColor="@color/white"android:textSize="@dimen/sp_10" /><LinearLayoutandroid:id="@+id/ll_collect"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentRight="true"android:layout_centerVertical="true"android:background="@drawable/collect_yellow"android:gravity="center_vertical"android:orientation="horizontal"android:paddingLeft="@dimen/dp_12"android:paddingTop="@dimen/dp_6"android:paddingRight="@dimen/dp_12"android:paddingBottom="@dimen/dp_6"><ImageViewandroid:id="@+id/iv_collect"android:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@drawable/icon_collect" /><TextViewandroid:id="@+id/tv_collect"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginLeft="6dp"android:text="收藏"android:textColor="@color/black_29"android:textSize="@dimen/sp_10" /></LinearLayout></RelativeLayout></RelativeLayout><!--渐变标题--><android.support.v7.widget.Toolbarandroid:id="@+id/toolbar"android:layout_width="match_parent"android:layout_height="wrap_content"android:background="@color/white"android:paddingTop="25dp"app:contentInsetStart="0dp"app:layout_collapseMode="pin"app:popupTheme="@style/ThemeOverlay.AppCompat.Light"app:title="@null"><LinearLayoutandroid:orientation="horizontal"android:background="@color/white"android:id="@+id/ib_back_layout"android:layout_width="match_parent"android:layout_height="@dimen/dp_50"><ImageViewandroid:id="@+id/iv_back2"android:layout_width="wrap_content"android:layout_height="match_parent"android:src="@mipmap/backclose"android:layout_gravity="left"android:paddingRight="@dimen/dp_13"android:paddingLeft="@dimen/dp_13" /><LinearLayoutandroid:layout_gravity="center_vertical"android:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center_vertical"android:orientation="horizontal"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="@dimen/dp_32"android:layout_weight="1"android:background="@drawable/grey_search"android:orientation="horizontal"></LinearLayout><ImageViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:padding="@dimen/dp_13"android:src="@drawable/share_black" /></LinearLayout><ImageViewandroid:id="@+id/iv_share2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentRight="true"android:paddingRight="@dimen/dp_13"android:paddingLeft="@dimen/dp_13"android:src="@drawable/shape_black"android:layout_centerVertical="true" /></LinearLayout></android.support.v7.widget.Toolbar></android.support.design.widget.CollapsingToolbarLayout><!--Tab标签，要注意看布局的位置，在CollapsingToolbarLayout外边--><LinearLayoutandroid:id="@+id/ll_title"android:layout_width="match_parent"android:layout_height="@dimen/dp_48"android:layout_below="@id/rl_top"android:background="@color/white"android:gravity="center_vertical"android:orientation="horizontal"android:paddingLeft="@dimen/dp_13"><net.lucode.hackware.magicindicator.MagicIndicatorandroid:id="@+id/magic_indicator"android:layout_weight="1"android:layout_width="match_parent"android:layout_height="@dimen/dp_25" /><TextViewandroid:id="@+id/tv_shaixuan"android:layout_width="wrap_content"android:layout_height="wrap_content"android:drawableTop="@drawable/icon_shaixuan"android:drawablePadding="@dimen/dp_2"android:paddingLeft="@dimen/dp_13"android:paddingRight="@dimen/dp_13"android:text="筛选"android:textColor="@color/black_29"android:textSize="@dimen/sp_12" /></LinearLayout></android.support.design.widget.AppBarLayout><!--悬浮布局--><android.support.v4.widget.NestedScrollViewandroid:id="@+id/NestedScrollView"android:layout_width="match_parent"android:layout_height="match_parent"android:fillViewport="true"android:overScrollMode="always"app:layout_behavior="@string/appbar_scrolling_view_behavior"><android.support.v4.view.ViewPagerandroid:id="@+id/viewPager_fragment"android:layout_width="match_parent"android:layout_height="match_parent" /></android.support.v4.widget.NestedScrollView></android.support.design.widget.CoordinatorLayout><!--菜单区--><include layout="@layout/drawer_layout" /></android.support.v4.widget.DrawerLayout>

  • 自定义MagicIndicator渐变导航条

  • 继承IPagerIndicator
    @Overrideprotected void onDraw(Canvas canvas) {LinearGradient lg = new LinearGradient(getLineRect().left, getLineRect().top, getLineRect().right,getLineRect().bottom, new int[]{0xFFFFC75C, 0xFFFF5E30}, null, LinearGradient.TileMode.CLAMP);getPaint().setShader(lg);canvas.drawRoundRect(getLineRect(), getRoundRadius(), getRoundRadius(), getPaint());}

 

源码链接https://download.csdn.net/download/u010184528/12546332

 

 

 

 

 

 

 

最新文章