我要實現的效果
效果包含的功能
- 滑動標題漸變
- 滑動頁面,MagicIndicator吸頂功能
- 自定義MagicIndicator漸變色的指示器
- 抽屜菜單
功能用到的控件以及代碼解析
抽屜菜單DrawerLayout
- 外層是DrawerLayout,第一個子view是主內容區,這裏我用include來加載側滑菜單佈局
- 在菜單佈局中,必須設置android:layout_gravity="right",或者left,來對應Activity中的側滑方向,比如我在代碼 中設置left, drawerlayout.openDrawer(GravityCompat.START);如果設置right, drawerlayout.openDrawer(GravityCompat.END);
CoordinatorLayout
- CoordinatorLayout是協調佈局,通過該佈局可以實現摺疊懸浮效果,這裏也可以結合其他控件使用,這裏不多做解釋
- 參考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.CoordinatorLayout xmlns: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.AppBarLayout android: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.CollapsingToolbarLayout android: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"> <RelativeLayout android:id="@+id/rl_top" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/test_server_bg"> <LinearLayout android: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"> <ImageView android:id="@+id/iv_back" android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="@dimen/dp_13" android:src="@drawable/back_white" /> <LinearLayout android:layout_width="match_parent" android:layout_height="@dimen/dp_32" android:layout_weight="1" android:background="@drawable/trans_search" android:orientation="horizontal"></LinearLayout> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="@dimen/dp_13" android:src="@drawable/share_white" /> </LinearLayout> <RelativeLayout android: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.CircleImageView android:id="@+id/profile_image" android:layout_width="52dp" android:layout_height="52dp" /> <TextView android: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" /> <TextView android: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" /> <LinearLayout android: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"> <ImageView android:id="@+id/iv_collect" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/icon_collect" /> <TextView android: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.Toolbar android: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"> <LinearLayout android:orientation="horizontal" android:background="@color/white" android:id="@+id/ib_back_layout" android:layout_width="match_parent" android:layout_height="@dimen/dp_50"> <ImageView android: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" /> <LinearLayout android:layout_gravity="center_vertical" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center_vertical" android:orientation="horizontal"> <LinearLayout android:layout_width="match_parent" android:layout_height="@dimen/dp_32" android:layout_weight="1" android:background="@drawable/grey_search" android:orientation="horizontal"> </LinearLayout> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="@dimen/dp_13" android:src="@drawable/share_black" /> </LinearLayout> <ImageView android: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外邊--> <LinearLayout android: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.MagicIndicator android:id="@+id/magic_indicator" android:layout_weight="1" android:layout_width="match_parent" android:layout_height="@dimen/dp_25" /> <TextView android: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.NestedScrollView android: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.ViewPager android: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
@Override protected 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