android 缩放透明动画,Android之高仿QQ6.6.0侧滑效果（背景动画、透明+沉浸式状态栏、渐变效果）...
根據(jù)需求實(shí)現(xiàn)類似QQ側(cè)滑效果，之前看到過(guò)很多實(shí)現(xiàn)方式通過(guò)SlidingMenu，但是既然官方推出了自己的專屬控件，那么使用DrawerLayout就是不二選擇。且看下文。
一、先來(lái)看看官方文檔解釋
DrawerLayout充當(dāng)窗口內(nèi)容的頂層容器，允許交互式“抽屜”的觀點(diǎn)，以從窗口的邊緣拉出。抽屜的定位和布局是使用控制機(jī)器人：layout_gravity 屬性對(duì)應(yīng)到您想要的抽屜，從出現(xiàn)的觀點(diǎn)哪邊兒的觀點(diǎn)：左或右。(或者在啟動(dòng)支持布局方向平臺(tái)版本/結(jié)束)。要使用DrawerLayout，定位你的主要內(nèi)容視圖的第一個(gè)孩子，寬度和高度match_parent。添加抽屜為孩子意見的主要內(nèi)容視圖后，設(shè)置layout_gravity適當(dāng)。抽屜通常使用match_parent的高度與寬度固定。DrawerLayout.DrawerListener可以用來(lái)監(jiān)測(cè)抽屜意見的狀態(tài)和運(yùn)動(dòng)。避免進(jìn)行昂貴的操作，如動(dòng)畫，因?yàn)樗赡軙?huì)導(dǎo)致口吃過(guò)程中的布局; 嘗試在執(zhí)行昂貴的操作STATE_IDLE狀態(tài)。DrawerLayout.SimpleDrawerListener提供每個(gè)回調(diào)方法的默認(rèn)/無(wú)操作實(shí)現(xiàn)。
二、再來(lái)看看繼承關(guān)系
三、效果圖(真實(shí)圖和效果圖)
說(shuō)明： 此圖來(lái)自網(wǎng)絡(luò)。
說(shuō)明： 此圖是實(shí)現(xiàn)的效果截圖，在模擬器上運(yùn)行的，建議換作真機(jī)看效果，狀態(tài)欄的漸變更明顯。
說(shuō)明： 此圖是模擬器運(yùn)行的完整效果圖，建議使用真機(jī)看效果。涉及的知識(shí)點(diǎn)：狀態(tài)欄的設(shè)置，漸變效果；屬性動(dòng)畫；TabLayout使用；最主要的DrawerLayout的使用。
下面就來(lái)看代碼片段
主頁(yè)面的布局
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">
說(shuō)明： 在這里可以看到，最外層布局是DrawerLayout，里面嵌套了兩層布局，一層是RelativeLayout，一層是include進(jìn)來(lái)的draw_menu_layout，這里需要說(shuō)明一下，drawerlayout的子布局第一層是主頁(yè)面的內(nèi)容，第二層是側(cè)滑的內(nèi)容，所以才有上面的布局。當(dāng)然也可以有第三層布局，作為第二層的子布局使用。
左側(cè)布局內(nèi)容
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="設(shè)置"
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" />
說(shuō)明： 這里就是一個(gè)不同的布局了，和平時(shí)寫法沒(méi)啥區(qū)別。需要注意的是使用FrameLayout的原因。
下面就來(lái)看看我們的主頁(yè)代碼：
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版本側(cè)滑效果
*
* DrawerLayout內(nèi)容偏移，背景動(dòng)畫，主頁(yè)面導(dǎo)航圖標(biāo)漸變，狀態(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; // 側(cè)邊有動(dòng)畫效果的背景圖片
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[] = {"開通會(huì)員", "QQ錢包", "個(gè)性裝扮", "我的收藏", "我的相冊(cè)", "我的文件", "我的日程", "我的名片夾"};
@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);
// 設(shè)置側(cè)滑背景圖片的動(dòng)畫
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);
// 同時(shí)添加圖標(biāo)和文字需要自定義view,此種方式無(wú)效,和適配器關(guān)聯(lián)的時(shí)候,就被隱藏掉了.
// 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);
//設(shè)置監(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) {
// 導(dǎo)航圖標(biāo)漸變效果
ivNavigation.setAlpha(1 - slideOffset);
// 判斷是否左菜單并設(shè)置移動(dòng)(如果不這樣設(shè)置,則主頁(yè)面的內(nèi)容不會(huì)向右移動(dòng))
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) {
}
/**
* 當(dāng)抽屜滑動(dòng)狀態(tài)改變的時(shí)候被調(diào)用
* 狀態(tài)值是STATE_IDLE(閑置-0)，STATE_DRAGGING(拖拽-1)，STATE_SETTLING(固定-2)中之一。
* 抽屜打開的時(shí)候，點(diǎn)擊抽屜，drawer的狀態(tài)就會(huì)變成STATE_DRAGGING，然后變成STATE_IDLE.
*
* @param newState
*/
@Override
public void onDrawerStateChanged(int newState) {
}
});
}
// 設(shè)置狀態(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設(shè)置關(guān)聯(lián)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);
}
}
}
說(shuō)明： 就是最核心的代碼了，關(guān)于每個(gè)部分的功能都有注釋，就不多說(shuō)了。完整代碼已上傳至github，微信關(guān)注“code小生”查看鏈接地址。
總結(jié)
以上是生活随笔為你收集整理的android 缩放透明动画,Android之高仿QQ6.6.0侧滑效果（背景动画、透明+沉浸式状态栏、渐变效果）...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： InvocationHandler实现类
- 下一篇： android sina oauth2.