欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

程序员文章站 2024-03-06 11:06:07
前几天做的一个仿to圈个人资料界面的实现效果 下面是to圈的效果gif图: 做这个东西其实也花了一下午的时间,一开始思路一直没理清楚,就开始盲目的去做,结果反而事倍...

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

下面是to圈的效果gif图:

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

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

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

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

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; //顶部菜单栏

首先初始化各个布局部分的位置,然后主要是底部拖动布局的动态事件监听。

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

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

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

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

以上所述是小编给大家介绍的android模仿to圈儿个人资料界面层叠淡入淡出显示效果,希望对大家有所帮助