脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 软件编程 → Android → android 淡入淡出显示

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

 更新时间：2016年07月26日 11:50:56   作者：化作孤岛的瓜  
这篇文章主要介绍了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>

该布局由内而外嵌套了三层，其中上半部分我直接截了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圈儿个人资料界面层叠淡入淡出显示效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • Android Activity打开后被应用快照遮住的问题

    Android Activity打开后被应用快照遮住的问题

    这篇文章主要介绍了Android Activity打开后被应用快照遮住的问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01
  • Android中区别Drawable Bitmap Canvas Paint

    Android中区别Drawable Bitmap Canvas Paint

    本文主要介绍Android中Drawable Bitmap Canvas Paint 之间的区别,这里对这几个概念做出详细介绍,开发Android游戏的朋友可以参考下
    2016-07-07
  • Android 中SP与DP的区别实例详解

    Android 中SP与DP的区别实例详解

    这篇文章主要介绍了Android 中SP与DP的区别实例详解的相关资料,需要的朋友可以参考下
    2016-10-10
  • Android实现果冻滑动效果的控件

    Android实现果冻滑动效果的控件

    这篇文章给大家主要介绍了利用Android如何实现果冻效果滑动效果的控件，实现的效果类似于iOS有阻尼效果的滑动控件，一般我们比较亲切地称之为果冻控件，常见的如微信里[我]的那个面板模块，即使没有再多的选项，也不会很生硬的不允许用户滑动。下面来一起看看吧。
    2016-11-11
  • Flutter实现底部导航栏创建详解

    Flutter实现底部导航栏创建详解

    ConvexBottomBar是一个底部导航栏组件，用于展现凸起的TAB效果，支持多种内置样式与动画交互。本文将利用ConvexBottomBar创建漂亮的底部导航栏，感兴趣的可以学习一下
    2022-01-01
  • Android切面编程知识点详解

    Android切面编程知识点详解

    这篇文章给大家整理了关于Android进阶资深开发必备技能-切面编程的相关知识点内容，有兴趣的朋友可以参考学习下。
    2018-07-07
  • Android 获取未安装的APK图标、版本号、包名等信息方法

    Android 获取未安装的APK图标、版本号、包名等信息方法

    下面小编就为大家分享一篇Android 获取未安装的APK图标、版本号、包名等信息方法，具有很好的参考价值，希望对大家有所帮助。
    2018-01-01
  • Android compose气泡升起和水滴下坠动画实现示例

    Android compose气泡升起和水滴下坠动画实现示例

    这篇文章主要为大家介绍了Android compose气泡升起和水滴下坠动画实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-01-01
  • Android防止按钮重复点击示例代码

    Android防止按钮重复点击示例代码

    本文介绍封装的一个小的工具类库，按钮点击事件类库，该类库可以防止按钮重复点击，可以判断网络状态，可以判断用户登录态，以及自定义验证条件等等，有兴趣的可以了解一下
    2018-05-05
  • Android实现可复用的筛选页面

    Android实现可复用的筛选页面

    这篇文章主要为大家详细介绍了Android实现可复用的筛选页面，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-06-06

最新评论