Android實(shí)現(xiàn)第三方登錄的上拉展開，下拉隱藏，下拉隱藏示例
更新時(shí)間：2017年01月20日 08:16:12 作者：Microstrong0305
本篇文章抽出了項(xiàng)目登錄界面中實(shí)現(xiàn)的第三方登錄，用戶可以上拉展開，下拉隱藏第三方登錄這么一個(gè)效果，提高用戶和軟件的交互性。有興趣的可以了解一下。
Android的UI和交互是很重要的一部分，直接影響到用戶對軟件的體驗(yàn)。隨著項(xiàng)目經(jīng)驗(yàn)的積累，發(fā)現(xiàn)Android中動畫的運(yùn)用越來越重要。本篇文章抽出了項(xiàng)目登錄界面中實(shí)現(xiàn)的第三方登錄，用戶可以上拉展開，下拉隱藏第三方登錄這么一個(gè)效果，提高用戶和軟件的交互性。
實(shí)現(xiàn)效果：
（1）activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.propertyanimation.MainActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="vertical">
<RelativeLayout
android:id="@+id/re_ControlshowhideView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:orientation="vertical">
<RelativeLayout
android:id="@+id/re_showarrowhead"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<View
android:layout_width="match_parent"
android:layout_height="0.1dp"
android:layout_marginLeft="12dp"
android:layout_marginRight="12dp"
android:layout_marginTop="17dip"
android:background="#dadada" />
<ImageView
android:id="@+id/arrowhead"
android:layout_width="30dip"
android:layout_height="30dip"
android:layout_centerInParent="true"
android:src="@drawable/jiantoubelow" />
</RelativeLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/re_showarrowhead"
android:layout_marginTop="10dp"
android:gravity="center"
android:text="-其他登錄方式-" />
</RelativeLayout>
<RelativeLayout
android:id="@+id/showhideView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/re_ControlshowhideView"
android:gravity="center"
android:visibility="gone"
android:orientation="vertical">
<Button
android:id="@+id/btn_qq"
android:layout_width="40dp"
android:layout_height="57.5dp"
android:layout_gravity="center_vertical"
android:layout_marginLeft="10dp"
android:background="@drawable/qqlogin"
android:clickable="true"
android:gravity="center"
android:paddingLeft="10dp"
android:textSize="16sp" />
<Button
android:id="@+id/btn_weixin"
android:layout_width="40dp"
android:layout_height="57.5dp"
android:layout_gravity="center_vertical"
android:layout_marginLeft="10dp"
android:layout_toRightOf="@+id/btn_qq"
android:background="@drawable/weixinlogin"
android:clickable="true"
android:gravity="center"
android:paddingLeft="10dp"
android:textSize="16sp" />
</RelativeLayout>
</RelativeLayout>
</RelativeLayout>
（2）PropertyAnimation.java 這個(gè)文件主要是把實(shí)現(xiàn)的屬性動畫封裝到一個(gè)類里，這樣一個(gè)功能就成為一個(gè)模塊。其它調(diào)用者也可以很方便的使用。
package com.example.propertyanimation;
import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.animation.ValueAnimator;
import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.Animation;
import android.view.animation.RotateAnimation;
public class PropertyAnimation {
private float mDensity;
private int mHiddenViewMeasuredHeight; //點(diǎn)擊箭頭的時(shí)候，需要隱藏的控件最終到達(dá)一個(gè)高度，
// 這個(gè)就是我們要控件到達(dá)的目標(biāo)值。
public PropertyAnimation(Context context){
//點(diǎn)擊箭頭的時(shí)候，需要隱藏的控件最終到達(dá)一個(gè)高度，這個(gè)就是我們的目標(biāo)值，只需要通過布局中的dp轉(zhuǎn)換成像素就行了。
mDensity = context.getResources().getDisplayMetrics().density;
mHiddenViewMeasuredHeight = (int) (mDensity * 57.5 + 0.5);
}
public void animateOpen(View v) {
v.setVisibility(View.VISIBLE);
//createDropAnimator()自定義的一個(gè)動畫效果函數(shù)
ValueAnimator animator = createDropAnimator(v, 0,
mHiddenViewMeasuredHeight);
animator.start();
}
/**
* 給控制動畫的箭頭設(shè)置動畫.
* 給箭頭設(shè)置向上的動畫
* @param view 控件
*/
public void animationIvOpen(View view) {
//旋轉(zhuǎn)動畫，參數(shù)說明：new RotateAnimation(旋轉(zhuǎn)的開始角度,旋轉(zhuǎn)的結(jié)束角度,X軸的伸縮模式:可以取值為ABSOLUTE、
// RELATIVE_TO_SELF、RELATIVE_TO_PARENT,X坐標(biāo)的伸縮值,Y軸的伸縮模式:可以取值為ABSOLUTE、RELATIVE_TO_SELF、
// RELATIVE_TO_PARENT,Y坐標(biāo)的伸縮值);
RotateAnimation animation = new RotateAnimation(0, 180,
Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,
0.5f);
//動畫執(zhí)行完后是否停留在執(zhí)行完的狀態(tài)
animation.setFillAfter(true);
//持續(xù)時(shí)間
animation.setDuration(100);
//為箭頭圖片綁定動畫
view.startAnimation(animation);
}
/**
* 給控制動畫的箭頭設(shè)置動畫.
* 給箭頭設(shè)置向下的動畫
* @param view
*/
public void animationIvClose(View view) {
RotateAnimation animation = new RotateAnimation(180, 0,
Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,
0.5f);
animation.setFillAfter(true);
animation.setDuration(100);
view.startAnimation(animation);
}
/**
* 設(shè)置隱藏動畫
*
* @param view //動畫作用的控件
*/
public void animateClose(final View view) {
//獲得控件的高度
int origHeight = view.getHeight();
//createDropAnimator()自定義的一個(gè)動畫效果函數(shù)
ValueAnimator animator = createDropAnimator(view, origHeight, 0);
//如果你不想實(shí)現(xiàn)Animator.AnimatorListener中的所有接口，你可以通過繼承AnimatorListenerAdapter。
//AnimatorListenerAdapter類為所有的方法提供了一個(gè)空實(shí)現(xiàn)，所以你可以根據(jù)需要實(shí)現(xiàn)你需要的，覆蓋AnimatorListenerAdapter原來的方法
animator.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) { //動畫結(jié)束時(shí)調(diào)用
view.setVisibility(View.GONE);
}
});
animator.start();
}
/**
* 自定義的動畫效果
*
* @param v //動畫作用的控件
* @param start //動畫的開始值
* @param end //動畫的結(jié)束值
* @return
*/
private ValueAnimator createDropAnimator(final View v, int start, int end) {
//這里我們利用ValueAnimator.ofInt創(chuàng)建了一個(gè)值從start到end的動畫
ValueAnimator animator = ValueAnimator.ofInt(start, end);
//為ValueAnimator注冊AnimatorUpdateListener監(jiān)聽器，在該監(jiān)聽器中可以
// 監(jiān)聽ValueAnimator計(jì)算出來的值的改變，并將這些值應(yīng)用到指定對象
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator arg0) {
//獲取動畫當(dāng)前值
int value = (int) arg0.getAnimatedValue();
//得到控件的屬性集合
ViewGroup.LayoutParams layoutParams = v.getLayoutParams();
//設(shè)置控件的高屬性
layoutParams.height = value;
//把屬性綁定到需要?jiǎng)赢嫷目丶?
v.setLayoutParams(layoutParams);
}
});
return animator;
}
}
（3）MainActivity.java 這個(gè)文件開始使用封裝好的屬性動畫了。
package com.example.propertyanimation;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.Toast;
public class MainActivity extends Activity implements View.OnClickListener{
private ImageView mIv_arrowhead;
private RelativeLayout mHiddenLayout;
private PropertyAnimation propertyAnimation;
private Button btn_qq; //QQ登錄按鈕
private Button btn_weixin; //微信登錄按鈕
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//自己定義的屬性動畫類
propertyAnimation=new PropertyAnimation(this);
//隱藏/顯示第三方登錄的箭頭圖標(biāo)
mIv_arrowhead = (ImageView) this.findViewById(R.id.arrowhead);
mIv_arrowhead.setOnClickListener(this);
//隱藏/顯示的布局
mHiddenLayout = (RelativeLayout) this.findViewById(R.id.showhideView);
//QQ登錄
btn_qq = (Button) this.findViewById(R.id.btn_qq);
btn_qq.setOnClickListener(this);
//微信登錄
btn_weixin=(Button)this.findViewById(R.id.btn_weixin);
btn_weixin.setOnClickListener(this);
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.arrowhead:
if (mHiddenLayout.getVisibility() == View.GONE) {
propertyAnimation.animateOpen(mHiddenLayout);
propertyAnimation.animationIvOpen(mIv_arrowhead);
} else {
propertyAnimation.animateClose(mHiddenLayout);
propertyAnimation.animationIvClose(mIv_arrowhead);
}
break;
case R.id.btn_qq: //QQ授權(quán)登錄
Toast.makeText(this,"QQ登錄",Toast.LENGTH_SHORT).show();
break;
case R.id.btn_weixin: //微信授權(quán)登錄
Toast.makeText(this,"微信登錄",Toast.LENGTH_SHORT).show();
break;
}
}
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
本篇文章主要介紹了適配android7.0獲取文件的Uri的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
Android利用LitePal操作數(shù)據(jù)庫存取圖片
這篇文章主要為大家詳細(xì)介紹了Android利用LitePal操作數(shù)據(jù)庫存取圖片的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
這篇文章主要介紹了Android的Activity加載方式,結(jié)合實(shí)例形式分析了Android中Activity的加載與跳轉(zhuǎn)實(shí)現(xiàn)技巧,需要的朋友可以參考下2016-01-01
Android實(shí)現(xiàn)可收縮和擴(kuò)展的TextView
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)可收縮和擴(kuò)展的TextView，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
android通過拼音搜索中文的功能實(shí)現(xiàn)代碼
這篇文章主要介紹了android通過拼音搜索中文的功能實(shí)現(xiàn)代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-11-11
這篇文章主要介紹了Android 仿微信聊天時(shí)間格式化顯示功能,本文中還給大家簡單介紹了在同一年的顯示規(guī)則和不在同一年的顯示規(guī)則。需要的朋友可以參考下2017-02-02
Android編程單擊圖片實(shí)現(xiàn)切換效果的方法
這篇文章主要介紹了Android編程單擊圖片實(shí)現(xiàn)切換效果的方法,以實(shí)例形式分析了Android布局及切換功能的具體實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10
Android實(shí)現(xiàn)Activity界面切換添加動畫特效的方法
這篇文章主要介紹了Android實(shí)現(xiàn)Activity界面切換添加動畫特效的方法,非常實(shí)用的技巧,需要的朋友可以參考下2014-08-08
android RadioGroup的使用方法，需要的朋友可以參考下2012-11-11
這篇文章主要為大家詳細(xì)介紹了Android仿微信底部菜單欄效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11