Android开发仿抖音个人详情效果

Android开发仿抖音个人详情效果

仿抖音的个人详情，上滑悬停，点击头像放大效果

一、思路：

用CoordinatorLayout协调布局

二、效果图：

滑动悬停：

三、关键代码：

xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="@color/color_bg_theme">

    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <com.google.android.material.appbar.AppBarLayout
            android:id="@+id/appbarlayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/transparent"
            >

            <com.google.android.material.appbar.CollapsingToolbarLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/transparent"
                app:contentScrim="@color/color_bg_theme"
                app:layout_scrollFlags="scroll|exitUntilCollapsed">


                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">

                    <ImageView
                        android:id="@+id/ivBg"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:scaleType="centerCrop"
                        android:src="@mipmap/head3"/>

                    <include layout="@layout/personal_home_header"/>
                </RelativeLayout>

                <androidx.appcompat.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="48dp"
                    app:layout_collapseMode="pin">

                    <RelativeLayout
                        android:layout_width="match_parent"
                        android:layout_height="match_parent">



                        <TextView
                            android:id="@+id/tvTitle"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="德玛西亚"
                            android:textColor="@color/white"
                            android:textSize="18sp"
                            android:visibility="gone"
                            android:layout_centerInParent="true"/>

                        <TextView
                            android:id="@+id/tvFocus"
                            android:layout_width="60dp"
                            android:layout_height="30dp"
                            android:background="@drawable/shape_round_red"
                            android:text="关注"
                            android:textColor="@color/white"
                            android:textSize="14sp"
                            android:layout_centerVertical="true"
                            android:layout_alignParentRight="true"
                            android:layout_marginRight="52dp"
                            android:visibility="gone"
                            android:gravity="center"/>

                    </RelativeLayout>
                </androidx.appcompat.widget.Toolbar>

            </com.google.android.material.appbar.CollapsingToolbarLayout>

            <com.flyco.tablayout.SlidingTabLayout
                android:id="@+id/stl_home"
                android:layout_width="match_parent"
                android:layout_height="44dp"
                app:tl_indicator_color="#1C1C1E"
                app:tl_indicator_height="4dp"
                app:tl_indicator_width="12dp"
                app:tl_indicator_corner_radius="2dp"
                app:tl_tab_space_equal="true"
                app:tl_textsize="16sp"
                app:tl_textSelectColor="#1C1C1E"
                app:tl_textUnselectColor="#636366"
                app:tl_textSelectSize="24sp"
                app:tl_textBold="SELECT"
                android:background="@color/white"
                />

        </com.google.android.material.appbar.AppBarLayout>

        <androidx.viewpager2.widget.ViewPager2
            android:id="@+id/viewPager2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"
            android:background="@color/white"/>

    </androidx.coordinatorlayout.widget.CoordinatorLayout>

</RelativeLayout>

Activity代码：

class MainActivity : AppCompatActivity() {

    private var aFragment: AFragment? = null
    private var bFragment: BFragment? = null
    private var appbarlayout: AppBarLayout? = null
    private var tvTitle:TextView? = null
    private var tvFocus:TextView? = null


    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        appbarlayout = findViewById(R.id.appbarlayout)
        tvTitle = findViewById(R.id.tvTitle)
        tvFocus = findViewById(R.id.tvFocus)
        setappbarlayoutPercent()

        val stlHome = findViewById<SlidingTabLayout>(R.id.stl_home)
        val vp2Home = findViewById<ViewPager2>(R.id.viewPager2)
        vp2Home.adapter = object : FragmentStateAdapter(this) {
            override fun createFragment(position: Int): Fragment {
                return if (position == 0) {
                    if (aFragment == null) {
                        aFragment = AFragment()
                    }
                    aFragment!!
                } else {
                    if (bFragment == null) {
                        bFragment = BFragment()
                    }
                    bFragment!!
                }
            }

四、项目demo源码结构图：

有问题或者需要完整源码demo的可以看简介联系我，也可以私信我，我每天都看私信的