GooglePlay 首頁(yè)效果----tab的揭示效果(Reveal Effect) (1)
前言:
無(wú)意打開(kāi)GooglePlay app來(lái)著,然后發(fā)現(xiàn)首頁(yè)用了揭示效果,連起來(lái)用著感覺(jué)還不錯(cuò).
不清楚什么是揭示效果(Reveal Effect)的效果可以看我前面一篇文章:Material Design Reveal effect(揭示效果) 你可能見(jiàn)過(guò)但是叫不出名字的小效果
無(wú)法使用Google的小伙伴可以看我更前面的文章:提高(Android)開(kāi)發(fā)效率的工具與網(wǎng)站
工具與分析
- GooglePlay App,這個(gè)自己安裝好吧,
- 工具 uiautomatorviewer.bat,ui分析的工具,在Android sdk的tools目錄,建議鼠標(biāo)右鍵給它在桌面建個(gè)快捷方式,下次桌面雙擊就可以使用了,非常方便.
要點(diǎn):
- 揭示動(dòng)畫(huà) ViewAnimationUtils.createCircularReveal()
- TabLayout 的使用(修改)
- 獲取view點(diǎn)擊的坐標(biāo)(用于做動(dòng)畫(huà))
效果展示(動(dòng)畫(huà)的顏色是隨機(jī)的)
demo地址: https://github.com/didikee/Demos
效果展示
墻內(nèi)的小伙伴可以試試 APKPure,一個(gè)墻內(nèi)可以使用,資源是GooglePlay的,缺點(diǎn):下載慢,優(yōu)點(diǎn):能下....(無(wú)言以對(duì)...)
Google All
界面布局:
<LinearLayout
android:id="@+id/activity_google_play_tab_reveal"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.didikee.demos.ui.act.viewActivity.GooglePlayTabRevealActivity"
>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="140dp">
<FrameLayout
android:id="@+id/below"
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:id="@+id/act_view"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</FrameLayout>
<com.didikee.demos.ui.tab.ExtTabLayout
android:id="@+id/sliding_tabs"
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_gravity="bottom"
app:tabGravity="fill"
app:tabIndicatorHeight="1dp"
app:tabMode="fixed"
app:tabSelectedTextColor="@color/colorAccent"
app:tabTextColor="@color/white"/>
</FrameLayout>
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/bisque"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
/>
</LinearLayout>
重點(diǎn)是FrameLayout和它內(nèi)部的子View.
<FrameLayout
android:id="@+id/below"
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:id="@+id/act_view"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</FrameLayout>
子view負(fù)責(zé)執(zhí)行動(dòng)畫(huà),FrameLayout負(fù)責(zé)在子view執(zhí)行完動(dòng)畫(huà)后變成子view執(zhí)行動(dòng)畫(huà)的顏色,這樣就能達(dá)到一直無(wú)限切換的假象
這個(gè)模式和GooglePlay保持了一致,你可以打開(kāi)uiautomatorviewer看看Google的布局.
java實(shí)現(xiàn)
這里有個(gè)要說(shuō)明的細(xì)節(jié),可能細(xì)心的同學(xué)會(huì)發(fā)現(xiàn),執(zhí)行動(dòng)畫(huà)的起始位置和你手指點(diǎn)擊的位置有關(guān),這里的實(shí)現(xiàn)的以手指抬起的坐標(biāo)為執(zhí)行動(dòng)畫(huà)的起點(diǎn).
GooglePlay的tab不知道是什么寫(xiě)的,我個(gè)人感覺(jué)不是TabLayout,因?yàn)閠abLayout默認(rèn)點(diǎn)擊是會(huì)有漣漪效果的,但是GooglePlay的tab點(diǎn)擊了卻沒(méi)有,我也不想糾結(jié)它是用什么做的,我比較偏好TabLayout,所以我就用TabLayout去實(shí)現(xiàn).
插一句,關(guān)于Android自定義View的三種方式o((≧▽≦o)
1. 繼承 ViewGroup
2. 繼承 View
3. 拷貝源碼,然后改改...(～ o ～)~zZ
今天,用第三種................
獲取TabLayout點(diǎn)擊tab時(shí)的坐標(biāo):
拷貝Tablayout源碼到自己的工程(不要學(xué)我....)
TabLayout的組成:
TabLayout
TabView //每個(gè)item元素view
SlidingTabStrip //每個(gè)item下有一條線(xiàn),也是一個(gè)view
我的目標(biāo)是 TabView,在tabView Selected 的時(shí)候?qū)?即調(diào)用 mTab.select();)坐標(biāo)也一起傳出去.于是我添加一個(gè)接口.
//--------------add listener
public interface LocationListener{
void location(float x,float y,int tabHeight);
}
private MyExtTabLayout.LocationListener locationListener;
public void setLocationListener(MyExtTabLayout.LocationListener locationListener) {
this.locationListener = locationListener;
}
//------------add listener end
在tab選中時(shí)傳出坐標(biāo):
@Override
public boolean onTouchEvent(MotionEvent event) {
if (event.getAction()==MotionEvent.ACTION_UP){
x=event.getRawX();
y=event.getRawY();
}
return super.onTouchEvent(event);
}
@Override
public boolean performClick() {
final boolean value = super.performClick();
if (mTab != null) {
if (locationListener!=null)locationListener.location(x,y,getHeight());
mTab.select();
return true;
} else {
return value;
}
}
執(zhí)行動(dòng)畫(huà)
有了坐標(biāo)就可以執(zhí)行動(dòng)畫(huà)了,動(dòng)畫(huà)比較簡(jiǎn)單.和之前的一篇沒(méi)多大區(qū)別,只是這次我改了執(zhí)行動(dòng)畫(huà)的起始坐標(biāo),變成了動(dòng)態(tài)的了.
完整代碼:
private ViewPager viewPager;
private SimpleFragmentPagerAdapter pagerAdapter1;
private ExtTabLayout tabLayout;
private View viewAnimate;
private View below;
private float x;
private float y;
private int height;
private int belowColor;
private int systemStatusBarHeight;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_google_play_tab_reveal);
setBarStyle();
below = findViewById(R.id.below);
viewAnimate = findViewById(R.id.act_view);
systemStatusBarHeight = DisplayUtil.getSystemStatusBarHeight(this);
pagerAdapter1 = new SimpleFragmentPagerAdapter(getSupportFragmentManager(), new
String[]{"tab1", "tab2", "tab3", "tab4"});
viewPager = (ViewPager) findViewById(R.id.viewpager);
tabLayout = (ExtTabLayout) findViewById(R.id.sliding_tabs);
tabLayout.setupWithViewPager(viewPager);
tabLayout.setTabMode(ExtTabLayout.MODE_FIXED);
viewPager.setAdapter(pagerAdapter1);
belowColor = Color.parseColor(ColorUtil.random());
below.setBackgroundColor(belowColor);
viewAnimate.setBackgroundColor(belowColor);
tabLayout.setLocationListener(new ExtTabLayout.LocationListener() {
@Override
public void location(float x, float y, int tabHeight) {
GooglePlayTabRevealActivity.this.x = x;
GooglePlayTabRevealActivity.this.y = y;
GooglePlayTabRevealActivity.this.height = tabHeight;
}
});
tabLayout.addOnTabSelectedListener(new ExtTabLayout.OnTabSelectedListener() {
@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
@Override
public void onTabSelected(ExtTabLayout.Tab tab) {
Log.e("test", "x: " + x + " y: " + y + " height: " + height);
final int width = viewAnimate.getWidth();
final int height = viewAnimate.getHeight();
final double radio = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2));
float centerX = x;
float centerY = y;
Animator circularReveal = ViewAnimationUtils.createCircularReveal(viewAnimate,
(int) centerX,
(int) centerY, 0, (float) radio);
circularReveal.setInterpolator(new AccelerateInterpolator());
circularReveal.setDuration(375);
circularReveal.addListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animation) {
belowColor = Color.parseColor(ColorUtil.random());
viewAnimate.setBackgroundColor(belowColor);
}
@Override
public void onAnimationEnd(Animator animation) {
below.setBackgroundColor(belowColor);
}
@Override
public void onAnimationCancel(Animator animation) {
}
@Override
public void onAnimationRepeat(Animator animation) {
}
});
circularReveal.start();
}
@Override
public void onTabUnselected(ExtTabLayout.Tab tab) {
}
@Override
public void onTabReselected(ExtTabLayout.Tab tab) {
}
});
}
public void setBarStyle() {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
// 設(shè)置狀態(tài)欄透明
getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
}
}
public class SimpleFragmentPagerAdapter extends FragmentPagerAdapter {
private String tabTitles[];
public SimpleFragmentPagerAdapter(FragmentManager fm, String[] strings) {
super(fm);
tabTitles = strings;
}
@Override
public Fragment getItem(int position) {
return PageFragment.newInstance(position + 1);
}
@Override
public int getCount() {
return tabTitles.length;
}
@Override
public CharSequence getPageTitle(int position) {
return tabTitles[position];
}
}
@Override
protected void onDestroy() {
super.onDestroy();
viewAnimate.clearAnimation();
}
最后,demo在我的github上,地址是: https://github.com/didikee/Demos
喜歡的點(diǎn)個(gè)贊啦
