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

Android实现第三方登录的上拉展开,下拉隐藏,下拉隐藏示例

程序员文章站 2024-02-13 18:23:22
android的ui和交互是很重要的一部分,直接影响到用户对软件的体验。随着项目经验的积累,发现android中动画的运用越来越重要。本篇文章抽出了项目登录界面中实现的第三...

android的ui和交互是很重要的一部分,直接影响到用户对软件的体验。随着项目经验的积累,发现android中动画的运用越来越重要。本篇文章抽出了项目登录界面中实现的第三方登录,用户可以上拉展开,下拉隐藏第三方登录这么一个效果,提高用户和软件的交互性。

实现效果:

Android实现第三方登录的上拉展开,下拉隐藏,下拉隐藏示例

(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  这个文件主要是把实现的属性动画封装到一个类里,这样一个功能就成为一个模块。其它调用者也可以很方便的使用。

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; //点击箭头的时候,需要隐藏的控件最终到达一个高度, 
                      // 这个就是我们要控件到达的目标值。 
 
  public propertyanimation(context context){ 
    //点击箭头的时候,需要隐藏的控件最终到达一个高度,这个就是我们的目标值,只需要通过布局中的dp转换成像素就行了。 
    mdensity = context.getresources().getdisplaymetrics().density; 
    mhiddenviewmeasuredheight = (int) (mdensity * 57.5 + 0.5); 
  } 
 
  public void animateopen(view v) { 
    v.setvisibility(view.visible); 
    //createdropanimator()自定义的一个动画效果函数 
    valueanimator animator = createdropanimator(v, 0, 
        mhiddenviewmeasuredheight); 
    animator.start(); 
  } 
 
  /** 
   * 给控制动画的箭头设置动画. 
   * 给箭头设置向上的动画 
   * @param view  控件 
   */ 
  public void animationivopen(view view) { 
    //旋转动画,参数说明:new rotateanimation(旋转的开始角度,旋转的结束角度,x轴的伸缩模式:可以取值为absolute、 
    // relative_to_self、relative_to_parent,x坐标的伸缩值,y轴的伸缩模式:可以取值为absolute、relative_to_self、 
    // relative_to_parent,y坐标的伸缩值); 
    rotateanimation animation = new rotateanimation(0, 180, 
        animation.relative_to_self, 0.5f, animation.relative_to_self, 
        0.5f); 
    //动画执行完后是否停留在执行完的状态 
    animation.setfillafter(true); 
    //持续时间 
    animation.setduration(100); 
    //为箭头图片绑定动画 
    view.startanimation(animation); 
  } 
 
  /** 
   * 给控制动画的箭头设置动画. 
   * 给箭头设置向下的动画 
   * @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); 
  } 
 
  /** 
   * 设置隐藏动画 
   * 
   * @param view //动画作用的控件 
   */ 
  public void animateclose(final view view) { 
    //获得控件的高度 
    int origheight = view.getheight(); 
    //createdropanimator()自定义的一个动画效果函数 
    valueanimator animator = createdropanimator(view, origheight, 0); 
    //如果你不想实现animator.animatorlistener中的所有接口,你可以通过继承animatorlisteneradapter。 
    //animatorlisteneradapter类为所有的方法提供了一个空实现,所以你可以根据需要实现你需要的,覆盖animatorlisteneradapter原来的方法 
    animator.addlistener(new animatorlisteneradapter() { 
      @override 
      public void onanimationend(animator animation) {  //动画结束时调用 
        view.setvisibility(view.gone); 
      } 
    }); 
    animator.start(); 
  } 
 
  /** 
   * 自定义的动画效果 
   * 
   * @param v   //动画作用的控件 
   * @param start //动画的开始值 
   * @param end  //动画的结束值 
   * @return 
   */ 
  private valueanimator createdropanimator(final view v, int start, int end) { 
    //这里我们利用valueanimator.ofint创建了一个值从start到end的动画 
    valueanimator animator = valueanimator.ofint(start, end); 
    //为valueanimator注册animatorupdatelistener监听器,在该监听器中可以 
    // 监听valueanimator计算出来的值的改变,并将这些值应用到指定对象 
    animator.addupdatelistener(new valueanimator.animatorupdatelistener() { 
 
      @override 
      public void onanimationupdate(valueanimator arg0) { 
        //获取动画当前值 
        int value = (int) arg0.getanimatedvalue(); 
        //得到控件的属性集合 
        viewgroup.layoutparams layoutparams = v.getlayoutparams(); 
        //设置控件的高属性 
        layoutparams.height = value; 
        //把属性绑定到需要动画的控件上 
        v.setlayoutparams(layoutparams); 
      } 
    }); 
    return animator; 
  } 
 
} 

(3)mainactivity.java 这个文件开始使用封装好的属性动画了。

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); 
    //隐藏/显示第三方登录的箭头图标 
    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授权登录 
        toast.maketext(this,"qq登录",toast.length_short).show(); 
        break; 
      case r.id.btn_weixin: //微信授权登录 
        toast.maketext(this,"微信登录",toast.length_short).show(); 
        break; 
    } 
 
  } 
} 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。