Android 全仿To圈兒個人資料介面層疊淡入淡出顯示效果

阿新 • • 發佈：2019-02-04

前幾天做的一個仿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>

該佈局由內而外嵌套了三層，其中上半部分我直接截了To圈的圖。

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圈兒個人資料介面層疊淡入淡出顯示效果

前幾天做的一個仿To圈個人資料介面的實現效果下面是To圈的效果Gif圖：做這個東西其實也花了一下午的時間，一開始思路一直沒理清楚，就開始盲目的去做，結果反而事倍功半。以後要吸取教訓，先詳細思考清楚其中的邏輯關係，然後再開始動手寫程式碼，這樣比較容易理順。可以看到實

[Android開發] SlidingMenu側滑剩餘的位置新增陰影淡入淡出

一、效果圖二、修改方法 1. 在SlidingMenu新增一個設定透明度方法 public void setOffsetFadeDegree(float f) { mViewBehind.setOffsetFadeDegr

#Android筆記#popupwindow淡入淡出動畫效果的研究

前幾天完成了底部選單欄的設計與功能的實現，其中就包括了其彈出效果的設定，下面就來分析一下：實現步驟： 1.在res目錄下新建anim資料夾用來存放動畫相關的xml檔案。 2.新建xml檔案(push_bottom_in.xml,push_bottom_out.xm

Android介面設計之個人資料介面

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/contain

Android之仿美團載入資料幀動畫

-----------------轉載請註明出處：http://blog.csdn.net/android_cll 一：先來張效果圖(這裡是GIF動畫，我就截圖的所有沒有動畫，實際是動的)：二：

【Android】一個適用於大圖介面向下拖拽返回的效果

GitHub：DragBottom 適用於檢視大圖的下拉拖拽返回控制元件共享元素適用於5.0+ 最初看到這個效果是在IOS系統的簡訊App中,後來在IOS微信、騰訊新聞中都發現了類似的效果。網路上好像也沒有類似的程式碼，所以決定自己動手寫一個

Android高仿秒拍熱榜的卡片滑動和左右飛出效果--SwipeCardsView

來由之所以做這個效果是因為專案中有這個效果需要實現。一開始我有在github上找到不少類似的庫，但是發現放在專案中會發現要麼有鋸齒，要麼就是卡頓，總之就是效果不好，其實絕大多數的庫都和Swip

Android高仿qq閱讀/微信讀書/掌閱高亮選擇文字效果

前言最近做epub閱讀器,有劃線的需求，即類似於qq閱讀/微信讀書/掌閱那樣的移動選擇文字並高亮劃線等,在這裡記錄下實現的思路供大家參考，功能都還沒有上線，等優化徹底了，我可以考慮抽出這個模組開源下，嘿嘿！實現的效果圖可以看到，這個效果還是可

android view淡入淡出動畫優化

這個基本是看了文件之後所寫，之前一直沒有發現也不知道有沒有效果，反正記錄一點是一點，打算以後用到的話就可以用上，基本上從文件上照搬，這只是提示自己以後可以用而已。文件解釋：對於正在淡入的檢視，請將alpha值設定為0和能見度VISIBLE。(請記住，它最初被設定為GONE)這使檢視

android【基礎】 style標籤應用與activity間的淡入淡出切換

比如定義一個button，其不同的狀態下用到了一些不同的按鈕狀態的圖片，在drawable目錄下定義一個button各種狀態時的樣式，button.xml <?xml version="1.0" encoding="utf-8"?> <s

Android實現動畫效果之淡入淡出

QQ群：372135639 View漸隱動畫效果 /** * View漸隱動畫效果 */ public void setHideAnimation( View view, int duration) {

Android資源之圖像資源（淡入淡出、嵌入）

Android仿微信氣泡聊天介面設計天氣取資料uri

Android仿微信氣泡聊天介面設計 : 中央氣象臺實時天氣取資料:urihttp://www.weather.com.cn/data/sk/101010100.html 中央氣象臺預報天氣取資料:urihttp://m.weather.com.cn/data/

Android最全開發資源及參考資料

-- 簡書作者謝恩銘轉載請註明出處 Android最全開發資源首先, 我覺得最好的Android學習路徑還是: 1.看Google Android官方開發主頁, 要記住Read The "Friendly" (F*ing) Doc (閱讀那該死的文件) , 和看Google Andro

Android自定義控制元件實戰——仿淘寶商品瀏覽介面

用手機淘寶瀏覽商品詳情時，商品圖片是放在後面的，在第一個ScrollView滾動到最底下時會有提示，繼續拖動才能瀏覽圖片。仿照這個效果寫一個出來並不難，只要定義一個Layout管理兩個ScrollView就行了，當第一個ScrollView滑到底部時，再次向上滑動進入第二

Android請求獲取Java後端資料,登入介面例子

最近做了個Android請求獲取Java後端資料的例子，簡單實現了一下。先上個登入介面圖：主要實現：java後端的程式碼 + Android的程式碼1、java後端（1）、先創個User類import net.sf.json.JSONObject; public cla

Android Studio使用ViewPager+Fragment實現仿微信滑動切換介面

前言微信的滑動切換獲得大家一致好評，在我們開發的過程中我們也經常模仿微信的導航效果。首先看下效果圖效果還算不錯，可以滑動切換和點選切換，微信介面用listview展示資料,通訊錄介面用的recyclerview展示資料，在接下來就帶著大家一一

android高仿抖音、點餐介面、天氣專案、自定義view指示、爬取美女圖片等原始碼

Android精選原始碼 Android優質部落格簡介最近東西寫的挺多的，這不又要弄一個類似於京東的地址選擇器，然後剛開

Android仿小米商城商品詳情介面UI，ScrollView巢狀ScrollView/WebView/ListView

最近公司沒事，研究了下多巢狀滾動元件的事件分發，雖然以前也接觸過，但都是拿網上的用，也是特別簡單的，正好朋友也需要，就研究了下這個Demo也不是很完善，放上來也是讓各位大牛給指點一下，優化優化使用情景：小米商城商品詳情介面，介面看似ScrollView，但當正常滾動到

根據牛腩老師的mono for android 視訊，自己用vs2017的xamarin for android高仿了一個登入介面跳轉主介面的程式

//定義四個控制元件 private Button btn_visit; private Button btn_login; private Button btn_cancel; private EditText txt_name;

Android 全仿To圈兒個人資料介面層疊淡入淡出顯示效果

相關推薦