前几天做的一个仿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圈的效果几乎一模一样哦。
以上所述是小编给大家介绍的android模仿to圈儿个人资料界面层叠淡入淡出显示效果，希望对大家有所帮助
如对本文有疑问， 点击进行留言回复！！
网友评论