android 缩放透明动画,Android之高仿QQ6.6.0侧滑效果（背景动画、透明+沉浸式状态栏、渐变效果）...
根據需求實現類似QQ側滑效果，之前看到過很多實現方式通過SlidingMenu，但是既然官方推出了自己的專屬控件，那么使用DrawerLayout就是不二選擇。且看下文。
一、先來看看官方文檔解釋
DrawerLayout充當窗口內容的頂層容器，允許交互式“抽屜”的觀點，以從窗口的邊緣拉出。抽屜的定位和布局是使用控制機器人：layout_gravity 屬性對應到您想要的抽屜，從出現的觀點哪邊兒的觀點：左或右。(或者在啟動支持布局方向平臺版本/結束)。要使用DrawerLayout，定位你的主要內容視圖的第一個孩子，寬度和高度match_parent。添加抽屜為孩子意見的主要內容視圖后，設置layout_gravity適當。抽屜通常使用match_parent的高度與寬度固定。DrawerLayout.DrawerListener可以用來監(jiān)測抽屜意見的狀態(tài)和運動。避免進行昂貴的操作，如動畫，因為它可能會導致口吃過程中的布局; 嘗試在執(zhí)行昂貴的操作STATE_IDLE狀態(tài)。DrawerLayout.SimpleDrawerListener提供每個回調方法的默認/無操作實現。
二、再來看看繼承關系
三、效果圖(真實圖和效果圖)
說明： 此圖來自網絡。
說明： 此圖是實現的效果截圖，在模擬器上運行的，建議換作真機看效果，狀態(tài)欄的漸變更明顯。
說明： 此圖是模擬器運行的完整效果圖，建議使用真機看效果。涉及的知識點：狀態(tài)欄的設置，漸變效果；屬性動畫；TabLayout使用；最主要的DrawerLayout的使用。
下面就來看代碼片段
主頁面的布局
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/id_drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/transparent">
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:orientation="vertical">
android:id="@+id/rl_main_top"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#14B6F6"
android:gravity="center_vertical">
android:id="@+id/iv_navigation_icon"
android:layout_width="35dp"
android:layout_height="35dp"
android:layout_marginLeft="10dp"
android:class="lazyload" src="https://img-blog.csdnimg.cn/2022010618541216493.png" data-original="@drawable/ic_launcher" />
android:id="@+id/tv_center"
android:layout_width="wrap_content"
android:layout_height="35dp"
android:layout_centerHorizontal="true"
android:gravity="center"
android:text="消息 電話"
android:textColor="#ffffff"
android:textSize="15sp" />
android:id="@+id/tv_right"
android:layout_width="35dp"
android:layout_height="35dp"
android:layout_alignParentRight="true"
android:layout_marginRight="8dp"
android:gravity="center"
android:textColor="#ffffff"
android:textSize="15sp" />
android:id="@+id/tab_main_bottom"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
app:tabGravity="center"
app:tabIndicatorHeight="0dp"
app:tabSelectedTextColor="@color/colorPrimary">
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:icon="@drawable/skin_tab_icon_conversation_selected" />
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:icon="@drawable/skin_tab_icon_contact_selected" />
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:icon="@drawable/skin_tab_icon_plugin_selected" />
android:id="@+id/vp_main_contents"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@id/tab_main_bottom"
android:layout_below="@id/rl_main_top">
說明： 在這里可以看到，最外層布局是DrawerLayout，里面嵌套了兩層布局，一層是RelativeLayout，一層是include進來的draw_menu_layout，這里需要說明一下，drawerlayout的子布局第一層是主頁面的內容，第二層是側滑的內容，所以才有上面的布局。當然也可以有第三層布局，作為第二層的子布局使用。
左側布局內容
android:layout_width="280dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:clickable="true"
android:tag="left">
android:id="@+id/iv_drawer_bg"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:class="lazyload" src="https://img-blog.csdnimg.cn/2022010618541216493.png" data-original="@drawable/fnn" />
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
android:id="@+id/id_draw_menu_header"
android:layout_width="match_parent"
android:layout_height="200dp">
android:id="@+id/id_draw_menu_item_backup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginTop="100dp"
android:drawableLeft="@drawable/ic_launcher"
android:drawablePadding="15dp"
android:gravity="center"
android:text="code小生"
android:textColor="@android:color/white"
android:textSize="15sp" />
android:id="@+id/id_draw_menu_item_download"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_alignParentRight="true"
android:layout_marginRight="15dp"
android:layout_marginTop="35dp"
android:scaleType="centerCrop"
android:class="lazyload" src="https://img-blog.csdnimg.cn/2022010618541216493.png" data-original="@drawable/qrcode_min_cm" />
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/white">
android:id="@+id/id_draw_menu_item_main_tv"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_alignParentBottom="true"
android:gravity="center_vertical"
android:paddingLeft="15dp"
android:text="設置"
android:textSize="18sp" />
android:id="@+id/id_draw_menu_item_list_select"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_above="@id/id_draw_menu_item_main_tv"
android:divider="@android:color/transparent"
android:overScrollMode="never"
android:scrollbars="none" />
說明： 這里就是一個不同的布局了，和平時寫法沒啥區(qū)別。需要注意的是使用FrameLayout的原因。
下面就來看看我們的主頁代碼：
package com.example.mjj.drawerlayoutqq;
import android.animation.ObjectAnimator;
import android.graphics.Color;
import android.os.Build;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.design.widget.TabLayout;
import android.support.v4.view.GravityCompat;
import android.support.v4.view.ViewPager;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.Window;
import android.view.WindowManager;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.TextView;
import android.widget.Toast;
/**
* 仿QQ6.6.0版本側滑效果
*
* DrawerLayout內容偏移，背景動畫，主頁面導航圖標漸變，狀態(tài)欄漸變色.
*
* Created by Mjj on 2016/12/7.
*/
public class MainActivity extends AppCompatActivity {
private SystemBarTintManager tintManager;
private DrawerLayout mDrawerLayout;
private ImageView ivNavigation;
private ImageView ivDrawerBg; // 側邊有動畫效果的背景圖片
private TextView tvCenter, tvRight;
private int[] tabIcons = {R.drawable.ngq, R.drawable.nti, R.drawable.nbb};
private TabLayout tabLayout;
private ViewPager viewPager;
private ListView listView;
private String strings[] = {"開通會員", "QQ錢包", "個性裝扮", "我的收藏", "我的相冊", "我的文件", "我的日程", "我的名片夾"};
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
setTranslucentStatus(true);
tintManager = new SystemBarTintManager(this);
tintManager.setStatusBarTintEnabled(true);
tintManager.setStatusBarTintColor(Color.parseColor("#14B6F6"));
}
setContentView(R.layout.activity_main);
initView();
}
private void initView() {
ivNavigation = (ImageView) findViewById(R.id.iv_navigation_icon);
mDrawerLayout = (DrawerLayout) findViewById(R.id.id_drawer_layout);
// 設置側滑背景圖片的動畫
ivDrawerBg = (ImageView) findViewById(R.id.iv_drawer_bg);
float curTranslationY = ivDrawerBg.getTranslationY();
ObjectAnimator animator = ObjectAnimator.ofFloat(ivDrawerBg, "translationY", curTranslationY,
-70f, 60, curTranslationY);
animator.setDuration(5000);
animator.setRepeatCount(ObjectAnimator.INFINITE);
animator.start();
tvCenter = (TextView) findViewById(R.id.tv_center);
tvRight = (TextView) findViewById(R.id.tv_right);
tabLayout = (TabLayout) findViewById(R.id.tab_main_bottom);
viewPager = (ViewPager) findViewById(R.id.vp_main_contents);
// 同時添加圖標和文字需要自定義view,此種方式無效,和適配器關聯的時候,就被隱藏掉了.
// tabLayout.addTab(tabLayout.newTab().setIcon(tabIcons[0]));
// tabLayout.addTab(tabLayout.newTab().setIcon(tabIcons[1]));
// tabLayout.addTab(tabLayout.newTab().setIcon(tabIcons[2]));
MyFragmentPagerAdapter adapter = new MyFragmentPagerAdapter(getSupportFragmentManager(),
tabIcons, this);
viewPager.setAdapter(adapter);
tabLayout.setupWithViewPager(viewPager);
//設置監(jiān)聽
ivNavigation.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
toggle();
}
});
listView = (ListView) mDrawerLayout.findViewById(R.id.id_draw_menu_item_list_select);
listView.setAdapter(new ArrayAdapter(MainActivity.this, android.R.layout.simple_list_item_1, strings));
listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView> adapterView, View view, int i, long l) {
Toast.makeText(MainActivity.this, strings[i], Toast.LENGTH_SHORT).show();
}
});
mDrawerLayout.addDrawerListener(new DrawerLayout.DrawerListener() {
/**
* @param drawerView
* @param slideOffset 偏移(0-1)
*/
@Override
public void onDrawerSlide(View drawerView, float slideOffset) {
// 導航圖標漸變效果
ivNavigation.setAlpha(1 - slideOffset);
// 判斷是否左菜單并設置移動(如果不這樣設置,則主頁面的內容不會向右移動)
if (drawerView.getTag().equals("left")) {
View content = mDrawerLayout.getChildAt(0);
int offset = (int) (drawerView.getWidth() * slideOffset);
content.setTranslationX(offset);
// 縮放效果(之前QQ效果)
// content.setTranslationX(1 - slideOffset * 0.5f);
// content.setTranslationY(1 - slideOffset * 0.5f);
}
tintManager.setStatusBarAlpha(1 - slideOffset);
}
@Override
public void onDrawerOpened(View drawerView) {
}
@Override
public void onDrawerClosed(View drawerView) {
}
/**
* 當抽屜滑動狀態(tài)改變的時候被調用
* 狀態(tài)值是STATE_IDLE(閑置-0)，STATE_DRAGGING(拖拽-1)，STATE_SETTLING(固定-2)中之一。
* 抽屜打開的時候，點擊抽屜，drawer的狀態(tài)就會變成STATE_DRAGGING，然后變成STATE_IDLE.
*
* @param newState
*/
@Override
public void onDrawerStateChanged(int newState) {
}
});
}
// 設置狀態(tài)欄透明狀態(tài)
private void setTranslucentStatus(boolean on) {
Window win = getWindow();
WindowManager.LayoutParams winParams = win.getAttributes();
final int bits = WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS;
if (on) {
winParams.flags |= bits;
} else {
winParams.flags &= ~bits;
}
win.setAttributes(winParams);
}
/**
* 自定義NavigationIcon設置關聯DrawerLayout
*/
private void toggle() {
int drawerLockMode = mDrawerLayout.getDrawerLockMode(GravityCompat.START);
if (mDrawerLayout.isDrawerVisible(GravityCompat.START)
&& (drawerLockMode != DrawerLayout.LOCK_MODE_LOCKED_OPEN)) {
mDrawerLayout.closeDrawer(GravityCompat.START);
} else if (drawerLockMode != DrawerLayout.LOCK_MODE_LOCKED_CLOSED) {
mDrawerLayout.openDrawer(GravityCompat.START);
}
}
}
說明： 就是最核心的代碼了，關于每個部分的功能都有注釋，就不多說了。完整代碼已上傳至github，微信關注“code小生”查看鏈接地址。
總結
以上是生活随笔為你收集整理的android 缩放透明动画,Android之高仿QQ6.6.0侧滑效果（背景动画、透明+沉浸式状态栏、渐变效果）...的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： InvocationHandler实现类
- 下一篇： android模板 警务,基于Andro