詳解Android使用CoordinatorLayout+AppBarLayout實(shí)現(xiàn)拉伸頂部圖片功能
一、國(guó)際慣例,先看下效果圖
二、不跟你多bb直接上布局文件代碼
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
tools:context=".MainActivity"
android:clipChildren="false"
android:clipToPadding="false">
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="com.ce.myscrollimg.AppBarLayoutOverScrollViewBehavior">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll"
android:clipChildren="false"
android:clipToPadding="false">
<com.ce.myscrollimg.DisInterceptNestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipChildren="false"
android:clipToPadding="false"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.8">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="@+id/iv_bg"
android:layout_width="match_parent"
android:layout_height="130dp"
android:src="@mipmap/ic_cover_1"
android:scaleType="centerCrop"/>
</LinearLayout>
</com.ce.myscrollimg.DisInterceptNestedScrollView>
<com.ce.myscrollimg.DisInterceptNestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:tag="middle"
android:layout_marginTop="130dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<View
android:layout_width="match_parent"
android:layout_height="80dp"
android:background="#FFF003"/>
<View
android:layout_width="match_parent"
android:layout_height="80dp"
android:background="#FF3300"/>
</LinearLayout>
</com.ce.myscrollimg.DisInterceptNestedScrollView>
<androidx.appcompat.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:tag="toolbar"
app:layout_collapseMode="pin">
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<com.google.android.material.tabs.TabLayout
android:id="@+id/toolbar_tab"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_gravity="center"
app:tabIndicatorColor="#FFC000"
app:tabIndicatorFullWidth="false"
app:tabIndicatorHeight="0dp"
app:tabMode="scrollable"
android:layout_marginTop="4dp"
android:layout_marginBottom="2dp"
app:tabSelectedTextColor="#FFC000"
app:tabTextColor="#FFFFFF"
app:tabMaxWidth="90dp"
app:tabPaddingEnd="-1dp" />
<com.ce.myscrollimg.NoScrollViewPager
android:id="@+id/vp_content"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</LinearLayout>
三、上java代碼
package com.ce.myscrollimg;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.viewpager.widget.ViewPager;
import android.graphics.Typeface;
import android.os.Bundle;
import android.util.TypedValue;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import android.widget.TextView;
import com.google.android.material.tabs.TabLayout;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity {
private TabLayout toolbar_tab;
private NoScrollViewPager vp_content;
private ViewPagerAdapter vpAdapter;
private List<Fragment> listFragment = new ArrayList<>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
}
//初始化view
private void initView(){
//tab
toolbar_tab = findViewById(R.id.toolbar_tab);
//
vp_content = findViewById(R.id.vp_content);
vpAdapter = new ViewPagerAdapter(getSupportFragmentManager(),listFragment);
vp_content.setAdapter(vpAdapter);
vp_content.setOffscreenPageLimit(2);
toolbar_tab.setupWithViewPager(vp_content);
for(int i=0;i<12;i++){
listFragment.add(CeshiFragment.newInstance("第"+i+"頁(yè)"));
}
vpAdapter.notifyDataSetChanged();
for(int i=0;i<listFragment.size();i++){
TabLayout.Tab tab = toolbar_tab.getTabAt(i);
View customView = LayoutInflater.from(this).inflate(R.layout.tab_text, null, false);
TextView textView = customView.findViewById(R.id.tv_custom_tab);
// LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
// layoutParams.weight = 0;
// textView.setLayoutParams(layoutParams);
if (i == 0) {
textView.setText("推薦");
} else {
textView.setText("第"+i+"頁(yè)");
}
if (i == 0) {
textView.setTextSize(TypedValue.COMPLEX_UNIT_SP, 16);
textView.setTypeface(Typeface.defaultFromStyle(Typeface.BOLD));
textView.setTextColor(getResources().getColor(R.color.color_FFFFC000));
} else {
textView.setTextSize(TypedValue.COMPLEX_UNIT_SP, 14);
textView.setTextColor(getResources().getColor(R.color._1E1E1E));
}
tab.setCustomView(customView);
}
toolbar_tab.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
View view = tab.getCustomView();
if (view != null) {
TextView textView = view.findViewById(R.id.tv_custom_tab);
textView.setTextSize(TypedValue.COMPLEX_UNIT_SP, 16);
textView.setTypeface(Typeface.defaultFromStyle(Typeface.BOLD));
textView.setTextColor(getResources().getColor(R.color.color_FFFFC000));
}
vp_content.setCurrentItem(tab.getPosition());
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
View view = tab.getCustomView();
if (view != null) {
TextView textView = view.findViewById(R.id.tv_custom_tab);
if (textView != null) {
textView.setTextSize(TypedValue.COMPLEX_UNIT_SP, 14);
textView.setTypeface(Typeface.defaultFromStyle(Typeface.NORMAL));
textView.setTextColor(getResources().getColor(R.color._1E1E1E));
}
}
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
}
}
四、重點(diǎn)在于設(shè)置AppBarLayout的Behavior這里自定義AppBarLayoutOverScrollViewBehavior,下面貼出代碼
package com.ce.myscrollimg;
import android.animation.Animator;
import android.animation.ValueAnimator;
import android.content.Context;
import android.util.AttributeSet;
import android.view.View;
import android.view.ViewGroup;
import androidx.appcompat.widget.Toolbar;
import androidx.coordinatorlayout.widget.CoordinatorLayout;
import androidx.core.view.ViewCompat;
import com.google.android.material.appbar.AppBarLayout;
/**
* Created by gjm on 2017/5/24.
* 目前包括的事件:
* 圖片放大回彈
* 個(gè)人信息布局的top和botoom跟隨圖片位移
* toolbar背景變色
*/
public class AppBarLayoutOverScrollViewBehavior extends AppBarLayout.Behavior {
private static final String TAG = "overScroll";
private static final String TAG_TOOLBAR = "toolbar";
private static final String TAG_MIDDLE = "middle";
private static final float TARGET_HEIGHT = 1500;
private View mTargetView;
private int mParentHeight;
private int mTargetViewHeight;
private float mTotalDy;
private float mLastScale;
private int mLastBottom;
private boolean isAnimate;
private Toolbar mToolBar;
private ViewGroup middleLayout;//個(gè)人信息布局
private int mMiddleHeight;
private boolean isRecovering = false;//是否正在自動(dòng)回彈中
private final float MAX_REFRESH_LIMIT = 0.3f;//達(dá)到這個(gè)下拉臨界值就開(kāi)始刷新動(dòng)畫(huà)
public AppBarLayoutOverScrollViewBehavior() {
}
public AppBarLayoutOverScrollViewBehavior(Context context, AttributeSet attrs) {
super(context, attrs);
}
@Override
public boolean onLayoutChild(CoordinatorLayout parent, AppBarLayout abl, int layoutDirection) {
boolean handled = super.onLayoutChild(parent, abl, layoutDirection);
if (mToolBar == null) {
mToolBar = parent.findViewWithTag(TAG_TOOLBAR);
}
if (middleLayout == null) {
middleLayout = (ViewGroup) parent.findViewWithTag(TAG_MIDDLE);
}
// 需要在調(diào)用過(guò)super.onLayoutChild()方法之后獲取
if (mTargetView == null) {
mTargetView = parent.findViewById(R.id.iv_bg);
if (mTargetView != null) {
initial(abl);
}
}
abl.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
@Override
public final void onOffsetChanged(AppBarLayout appBarLayout, int i) {
mToolBar.setAlpha(Float.valueOf(Math.abs(i)) / Float.valueOf(appBarLayout.getTotalScrollRange()));
}
});
return handled;
}
@Override
public boolean onStartNestedScroll(CoordinatorLayout parent, AppBarLayout child, View directTargetChild, View target, int nestedScrollAxes, int x) {
isAnimate = true;
if (target instanceof DisInterceptNestedScrollView) return true;//這個(gè)布局就是middleLayout
return super.onStartNestedScroll(parent, child, directTargetChild, target, nestedScrollAxes,x);
}
@Override
public void onNestedPreScroll(CoordinatorLayout coordinatorLayout, AppBarLayout child, View target, int dx, int dy, int[] consumed, int x) {
if (!isRecovering) {
if (mTargetView != null && ((dy < 0 && child.getBottom() >= mParentHeight)
|| (dy > 0 && child.getBottom() > mParentHeight))) {
scale(child, target, dy);
return;
}
}
super.onNestedPreScroll(coordinatorLayout, child, target, dx, dy, consumed,x);
}
@Override
public boolean onNestedPreFling(CoordinatorLayout coordinatorLayout, AppBarLayout child, View target, float velocityX, float velocityY) {
if (velocityY > 100) {//當(dāng)y速度>100,就秒彈回
isAnimate = false;
}
return super.onNestedPreFling(coordinatorLayout, child, target, velocityX, velocityY);
}
@Override
public void onStopNestedScroll(CoordinatorLayout coordinatorLayout, AppBarLayout abl, View target, int x) {
recovery(abl);
super.onStopNestedScroll(coordinatorLayout, abl, target,x);
}
private void initial(AppBarLayout abl) {
abl.setClipChildren(false);
mParentHeight = abl.getHeight();
mTargetViewHeight = mTargetView.getHeight();
mMiddleHeight = middleLayout.getHeight();
}
private void scale(AppBarLayout abl, View target, int dy) {
mTotalDy += -dy;
mTotalDy = Math.min(mTotalDy, TARGET_HEIGHT);
mLastScale = Math.max(1f, 1f + mTotalDy / TARGET_HEIGHT);
ViewCompat.setScaleX(mTargetView, mLastScale);
ViewCompat.setScaleY(mTargetView, mLastScale);
mLastBottom = mParentHeight + (int) (mTargetViewHeight / 2 * (mLastScale - 1));
abl.setBottom(mLastBottom);
target.setScrollY(0);
middleLayout.setTop(mLastBottom - mMiddleHeight);
middleLayout.setBottom(mLastBottom);
if (onProgressChangeListener != null) {
float progress = Math.min((mLastScale - 1) / MAX_REFRESH_LIMIT, 1);//計(jì)算0~1的進(jìn)度
onProgressChangeListener.onProgressChange(progress, false);
}
}
public interface onProgressChangeListener {
/**
* 范圍 0~1
*
* @param progress
* @param isRelease 是否是釋放狀態(tài)
*/
void onProgressChange(float progress, boolean isRelease);
}
public void setOnProgressChangeListener(AppBarLayoutOverScrollViewBehavior.onProgressChangeListener onProgressChangeListener) {
this.onProgressChangeListener = onProgressChangeListener;
}
onProgressChangeListener onProgressChangeListener;
private void recovery(final AppBarLayout abl) {
if (isRecovering) return;
if (mTotalDy > 0) {
isRecovering = true;
mTotalDy = 0;
if (isAnimate) {
ValueAnimator anim = ValueAnimator.ofFloat(mLastScale, 1f).setDuration(200);
anim.addUpdateListener(
new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
float value = (float) animation.getAnimatedValue();
ViewCompat.setScaleX(mTargetView, value);
ViewCompat.setScaleY(mTargetView, value);
abl.setBottom((int) (mLastBottom - (mLastBottom - mParentHeight) * animation.getAnimatedFraction()));
middleLayout.setTop((int) (mLastBottom -
(mLastBottom - mParentHeight) * animation.getAnimatedFraction() - mMiddleHeight));
if (onProgressChangeListener != null) {
float progress = Math.min((value - 1) / MAX_REFRESH_LIMIT, 1);//計(jì)算0~1的進(jìn)度
onProgressChangeListener.onProgressChange(progress, true);
}
}
}
);
anim.addListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animation) {
}
@Override
public void onAnimationEnd(Animator animation) {
isRecovering = false;
}
@Override
public void onAnimationCancel(Animator animation) {
}
@Override
public void onAnimationRepeat(Animator animation) {
}
});
anim.start();
} else {
ViewCompat.setScaleX(mTargetView, 1f);
ViewCompat.setScaleY(mTargetView, 1f);
abl.setBottom(mParentHeight);
middleLayout.setTop(mParentHeight - mMiddleHeight);
// middleLayout.setBottom(mParentHeight);
isRecovering = false;
if (onProgressChangeListener != null)
onProgressChangeListener.onProgressChange(0, true);
}
}
}
}
五、源碼下載
http://xiazai.jb51.net/201910/yuanma/MyScrollImg_jb51.rar
總結(jié)
以上所述是小編給大家介紹的Android使用CoordinatorLayout+AppBarLayout實(shí)現(xiàn)拉伸頂部圖片功能,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)我們網(wǎng)站的支持!
如果你覺(jué)得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!
上一篇:Android實(shí)現(xiàn)左上角(其他邊角)傾斜的標(biāo)簽(環(huán)繞效果)效果
欄 目:Android
下一篇:Android實(shí)現(xiàn)apk插件方式換膚的實(shí)例講解
本文標(biāo)題:詳解Android使用CoordinatorLayout+AppBarLayout實(shí)現(xiàn)拉伸頂部圖片功能
本文地址:http://www.jygsgssxh.com/a1/Android/9142.html
您可能感興趣的文章
- 01-10Android自定義View之繪制圓形頭像功能
- 01-10Android實(shí)現(xiàn)雙擊返回鍵退出應(yīng)用實(shí)現(xiàn)方法詳解
- 01-10android實(shí)現(xiàn)記住用戶名和密碼以及自動(dòng)登錄
- 01-10android實(shí)現(xiàn)簡(jiǎn)單計(jì)算器功能
- 01-10Android 友盟第三方登錄與分享的實(shí)現(xiàn)代碼
- 01-10android實(shí)現(xiàn)指紋識(shí)別功能
- 01-10Emoji表情在Android JNI中的兼容性問(wèn)題詳解
- 01-10Android實(shí)現(xiàn)圓形漸變加載進(jìn)度條
- 01-10android開(kāi)發(fā)環(huán)境中SDK文件夾下的所需內(nèi)容詳解
- 01-10android異步消息機(jī)制 源碼層面徹底解析(1)


閱讀排行
- 1C語(yǔ)言 while語(yǔ)句的用法詳解
- 2java 實(shí)現(xiàn)簡(jiǎn)單圣誕樹(shù)的示例代碼(圣誕
- 3利用C語(yǔ)言實(shí)現(xiàn)“百馬百擔(dān)”問(wèn)題方法
- 4C語(yǔ)言中計(jì)算正弦的相關(guān)函數(shù)總結(jié)
- 5c語(yǔ)言計(jì)算三角形面積代碼
- 6什么是 WSH(腳本宿主)的詳細(xì)解釋
- 7C++ 中隨機(jī)函數(shù)random函數(shù)的使用方法
- 8正則表達(dá)式匹配各種特殊字符
- 9C語(yǔ)言十進(jìn)制轉(zhuǎn)二進(jìn)制代碼實(shí)例
- 10C語(yǔ)言查找數(shù)組里數(shù)字重復(fù)次數(shù)的方法
本欄相關(guān)
- 01-10Android自定義View之繪制圓形頭像功能
- 01-10Android實(shí)現(xiàn)雙擊返回鍵退出應(yīng)用實(shí)現(xiàn)方
- 01-10android實(shí)現(xiàn)簡(jiǎn)單計(jì)算器功能
- 01-10android實(shí)現(xiàn)記住用戶名和密碼以及自動(dòng)
- 01-10C++自定義API函數(shù)實(shí)現(xiàn)大數(shù)相乘算法
- 01-10Android 友盟第三方登錄與分享的實(shí)現(xiàn)代
- 01-10android實(shí)現(xiàn)指紋識(shí)別功能
- 01-10如何給Flutter界面切換實(shí)現(xiàn)點(diǎn)特效
- 01-10Android實(shí)現(xiàn)圓形漸變加載進(jìn)度條
- 01-10Emoji表情在Android JNI中的兼容性問(wèn)題詳
隨機(jī)閱讀
- 01-11Mac OSX 打開(kāi)原生自帶讀寫(xiě)NTFS功能(圖文
- 01-10C#中split用法實(shí)例總結(jié)
- 04-02jquery與jsp,用jquery
- 08-05織夢(mèng)dedecms什么時(shí)候用欄目交叉功能?
- 01-10SublimeText編譯C開(kāi)發(fā)環(huán)境設(shè)置
- 01-10使用C語(yǔ)言求解撲克牌的順子及n個(gè)骰子
- 01-10delphi制作wav文件的方法
- 08-05dedecms(織夢(mèng))副欄目數(shù)量限制代碼修改
- 01-11ajax實(shí)現(xiàn)頁(yè)面的局部加載
- 08-05DEDE織夢(mèng)data目錄下的sessions文件夾有什


