Android 全仿To圈儿个人资料界面层叠淡入淡出显示效果

标签：

前几天做的一个仿To圈个人资料界面的实现效果

下面是To圈的效果Gif图：

做这个东西其实也花了一下午的时间，一开始思路一直没理清楚，就开始盲目的去做，结果反而事倍功半。

以后要吸取教训，先详细思考清楚其中的逻辑关系，然后再开始动手写代码，这样比较容易理顺。

可以看到实现这个效果还是不难的，得分成以下三个步骤：

1：首先要有一个可拖动的详细资料布局(下半部分)。

2：上半部分可跟随移动。

3：标题栏由隐藏到显示。

涉及到的技术点有：

1：屏幕像素密度DP转化。

2：自定义视图的OnTouchListener事件

3：透明度属性动画的使用

根据这三个要求，设计的布局如下：

userinfo_layout.xml

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white">

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

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/colorTheme"/>

        <LinearLayout
            android:id="@+id/mainheadview"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/top"></LinearLayout>
    </RelativeLayout>


        <LinearLayout
            android:id="@+id/myscrollLinearlayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#EEEEEE"
            android:clickable="true"
            android:orientation="vertical">

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="60dp"
                android:background="@android:color/white">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:layout_marginLeft="20dp"
                    android:gravity="center_vertical"
                    android:text="守护天使"
                    android:textColor="#DB4E61"
                    android:textSize="14sp"/>

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:layout_alignParentTop="true"
                    android:layout_marginEnd="66dp"
                    android:layout_toStartOf="@+id/imageView"
                    android:gravity="center_vertical"
                    android:text="暂时没有守护天使"
                    android:textColor="#C0C0C0"
                    android:textSize="14sp"/>

                <ImageView
                    android:id="@+id/imageView"
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:layout_alignParentEnd="true"
                    android:layout_alignParentTop="true"
                    android:layout_marginRight="20dp"
                    android:paddingBottom="34dp"
                    android:paddingTop="34dp"
                    android:src="@drawable/ic_more"/>
            </RelativeLayout>

            <View
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:background="#CCCCCC"
                ></View>

            <View
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:layout_marginTop="15dp"
                android:background="#CCCCCC"
                ></View>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:background="@android:color/white"
                android:orientation="horizontal">

                <TextView
                    android:layout_width="80dp"
                    android:layout_height="match_parent"
                    android:layout_marginLeft="15dp"
                    android:gravity="center_vertical"
                    android:text="昵称"
                    android:textColor="#C0C0C0"
                    android:textSize="14sp"/>

                <LinearLayout
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_marginLeft="10dp"
                    android:layout_weight="1"
                    android:orientation="vertical"
                    >

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="0dp"
                        android:layout_weight="1"
                        android:gravity="center"
                        android:textColor="@android:color/black"
                        android:textSize="12dp"/>

                    <View
                        android:layout_width="match_parent"
                        android:layout_height="1dp"
                        android:background="#CCCCCC"
                        ></View>
                </LinearLayout>
            </LinearLayout>


            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:background="@android:color/white"
                android:orientation="horizontal">

                <TextView
                    android:layout_width="80dp"
                    android:layout_height="match_parent"
                    android:layout_marginLeft="15dp"
                    android:gravity="center_vertical"
                    android:text="个性签名"
                    android:textColor="#C0C0C0"
                    android:textSize="14sp"/>

                <TextView
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_marginLeft="10dp"
                    android:layout_weight="1"
                    android:background="@android:color/transparent"/>
            </LinearLayout>

            <View
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:background="#CCCCCC"
                ></View>

            <View
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:layout_marginTop="15dp"
                android:background="#CCCCCC"
                ></View>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="100dp"
                android:background="@android:color/white"
                android:orientation="vertical">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="35dp"
                    android:layout_marginLeft="15dp"
                    android:gravity="center_vertical"
                    android:text="个人相册"
                    android:textColor="#C0C0C0"
                    android:textSize="14sp"/>

                <View
                    android:layout_width="match_parent"
                    android:layout_height="1dp"
                    android:background="#CCCCCC"
                    ></View>

            </LinearLayout>

            <View
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:background="#CCCCCC"
                ></View>

            <View
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:layout_marginTop="15dp"
                android:background="#CCCCCC"
                ></View>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="120dp"
                android:background="@android:color/white"
                android:orientation="vertical">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="30dp"
                    android:layout_marginLeft="15dp"
                    android:gravity="center_vertical"
                    android:text="私房视频"
                    android:textColor="#DB4E61"
                    android:textSize="14sp"/>

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="20dp"
                    android:layout_marginLeft="15dp"
                    android:gravity="start"
                    android:text="别人每查看你的一个私房视频，你讲获得100朵鲜花"
                    android:textColor="#C0C0C0"
                    android:textSize="10sp"/>

                <View
                    android:layout_width="match_parent"
                    android:layout_height="1dp"
                    android:background="#CCCCCC"
                    ></View>

            </LinearLayout>

            <View
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:background="#CCCCCC"
                ></View>

            <View
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:layout_marginTop="15dp"
                android:background="#CCCCCC"
                ></View>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:background="@android:color/white"
                android:orientation="vertical">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="35dp"
                    android:layout_marginLeft="15dp"
                    android:gravity="center_vertical"
                    android:text="缘分印象"
                    android:textColor="#C0C0C0"
                    android:textSize="14sp"/>

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="0dp"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:text="Ta还没有缘分印象"
                    android:textColor="#C0C0C0"/>
            </LinearLayout>
        </LinearLayout>

    <RelativeLayout
        android:id="@+id/mainactionbar"
        android:layout_width="match_parent"
        android:layout_height="55dp"
        >
        <ImageView
            android:id="@+id/userinfo_topbar"
            android:visibility="invisible"
            android:background="@color/colorTheme"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>

        <ImageButton
            android:id="@+id/userinfo_returnbtn"
            style="?android:attr/borderlessButtonStyle"
            android:layout_width="55dp"
            android:layout_height="55dp"
            android:padding="15dp"
            android:scaleType="fitCenter"
            android:src="@drawable/topbar_returnbtn"/>
    </RelativeLayout>

</RelativeLayout>

android:background="@drawable/top"

package com.whale.nangua.toquan;

import android.animation.ObjectAnimator;
import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.ScrollView;
import android.widget.Toast;

public class MainActivity extends Activity {

    LinearLayout myscrollLinearlayout;

    LinearLayout mainheadview;  //顶部个人资料视图

    RelativeLayout mainactionbar; //顶部菜单栏

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.userinfo_layout);
        initView();
    }

    int Y;
    int position = 0;       //拖动Linearlayout的距离Y轴的距离
    int scrollviewdistancetotop = 0;   //headView的高
    int menubarHeight = 0;
    int chufaHeight = 0; //需要触发动画的高
    float scale;    //像素密度
    int headViewPosition = 0;

    ImageView userinfo_topbar;


    static boolean flag = true;

    static boolean topmenuflag = true;

    private void initView() {
        userinfo_topbar = (ImageView) findViewById(R.id.userinfo_topbar);

        //获得像素密度
        scale = this.getResources().getDisplayMetrics().density;
        mainheadview = (LinearLayout) findViewById(R.id.mainheadview);
        mainactionbar = (RelativeLayout) findViewById(R.id.mainactionbar);

        menubarHeight = (int) (55 * scale);
        chufaHeight = (int) (110 * scale);

        scrollviewdistancetotop = (int) ((260 )*scale);
        position = scrollviewdistancetotop;
        myscrollLinearlayout = (LinearLayout) findViewById(R.id.myscrollLinearlayout);
        myscrollLinearlayout.setY( scrollviewdistancetotop);    //要减去Absolote布局距离顶部的高度
        myscrollLinearlayout.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

            }
        });
        myscrollLinearlayout.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                switch (event.getAction()) {
                    case MotionEvent.ACTION_DOWN:
                        //按下的Y的位置
                        Y = (int) event.getRawY();
                        break;
                    case MotionEvent.ACTION_MOVE:
                        int nowY = (int) myscrollLinearlayout.getY();   //拖动界面的Y轴位置
                        int tempY = (int) (event.getRawY() - Y);    //手移动的偏移量
                        Y = (int) event.getRawY();
                        if ((nowY + tempY >= 0) && (nowY + tempY <= scrollviewdistancetotop)) {
                            if ((nowY + tempY <= menubarHeight)&& (topmenuflag == true) ){
                                userinfo_topbar.setVisibility(View.VISIBLE);
                                topmenuflag = false;
                            } else if ((nowY + tempY > menubarHeight) && (topmenuflag == flag)) {
                                userinfo_topbar.setVisibility(View.INVISIBLE);
                                topmenuflag = true;
                            }
                            int temp = position += tempY;
                            myscrollLinearlayout.setY(temp);
                            int headviewtemp = headViewPosition += (tempY/5);
                             mainheadview.setY(headviewtemp);
                        }
                        //顶部的动画效果
                        if ((myscrollLinearlayout.getY() <= chufaHeight) && (flag == true)) {
                            ObjectAnimator anim = ObjectAnimator.ofFloat(mainheadview, "alpha", 1, 0.0f);
                            anim.setDuration(500);
                            anim.start();
                            flag = false;
                        } else if ((myscrollLinearlayout.getY() > chufaHeight + 40) && (flag == false)) {
                            ObjectAnimator anim = ObjectAnimator.ofFloat(mainheadview, "alpha", 0.0f, 1f);
                            anim.setDuration(500);
                            anim.start();
                            flag = true;
                        }
                        break;
                }
                return false;
            }
        });
    }
}

主要是对以下三个Layout的操作：

LinearLayout myscrollLinearlayout;  //底部可拖动的详细界面

LinearLayout mainheadview;  //顶部个人资料视图

RelativeLayout mainactionbar; //顶部菜单栏

需要在这个监听方法中处理与另外两个布局的交互，这一点比较麻烦，不过代码里都有详细的注释。

然后这是我实现的效果图：

可以看到跟To圈的效果几乎一模一样哦。

看不懂可以问我哒QAQ

Android 全仿To圈儿个人资料界面层叠淡入淡出显示效果

标签：

原文地址：http://blog.csdn.net/qq_22770457/article/details/52004020