Android仿IOS上拉下拉彈性效果,同時利用顏色漸變,設定上拉下拉背景顏色不一致效果
一,仿IOS上拉下拉彈性效果(這個是借鑑的,親測直接可用)
用過iphone的朋友相信都體驗過頁面上拉下拉有一個彈性的效果,使用起來使用者體驗很好,剛好最近專案需求要實現這種效果,剛好借鑑過來用,效果:
思路:其實原理很簡單,實現一個自定義的Scrollview方法(來自網上大神),然後在佈局檔案中使用自定義方法Scrollview就可以了。
自定義View,繼承自Scrollview。MyReboundScrollView類
//仿ios可上提下拉的ScrollView
public class MyReboundScrollView extends ScrollView {
private static final String TAG = "ElasticScrollView";
//移動因子, 是一個百分比, 比如手指移動了100px, 那麼View就只移動50px
//目的是達到一個延遲的效果
private static final float MOVE_FACTOR = 0.5f;
//鬆開手指後, 介面回到正常位置需要的動畫時間
private static final int ANIM_TIME = 100;
//ScrollView的子View, 也是ScrollView的唯一一個子View
private View contentView;
//手指按下時的Y值, 用於在移動時計算移動距離
//如果按下時不能上拉和下拉, 會在手指移動時更新為當前手指的Y值
private float startY;
//用於記錄正常的佈局位置
private Rect originalRect = new Rect();
//手指按下時記錄是否可以繼續下拉
private boolean canPullDown = false;
//手指按下時記錄是否可以繼續上拉
private boolean canPullUp = false;
//在手指滑動的過程中記錄是否移動了佈局
private boolean isMoved = false;
public MyReboundScrollView(Context context) {
super(context);
}
public MyReboundScrollView(Context context, AttributeSet attrs) {
super(context, attrs);
}
@Override
protected void onFinishInflate() {
if (getChildCount() > 0) {
contentView = getChildAt(0);
}
}
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
super.onLayout(changed, l, t, r, b);
if(contentView == null) return;
//ScrollView中的唯一子控制元件的位置資訊, 這個位置資訊在整個控制元件的生命週期中保持不變
originalRect.set(contentView.getLeft(), contentView.getTop(), contentView
.getRight(), contentView.getBottom());
}
//在觸控事件中, 處理上拉和下拉的邏輯
@Override
public boolean dispatchTouchEvent(MotionEvent ev) {
if (contentView == null) {
return super.dispatchTouchEvent(ev);
}
int action = ev.getAction();
switch (action) {
case MotionEvent.ACTION_DOWN:
//判斷是否可以上拉和下拉
canPullDown = isCanPullDown();
canPullUp = isCanPullUp();
//記錄按下時的Y值
startY = ev.getY();
break;
case MotionEvent.ACTION_UP:
if(!isMoved) break; //如果沒有移動佈局, 則跳過執行
// 開啟動畫
TranslateAnimation anim = new TranslateAnimation(0, 0, contentView.getTop(),
originalRect.top);
anim.setDuration(ANIM_TIME);
contentView.startAnimation(anim);
// 設定回到正常的佈局位置
contentView.layout(originalRect.left, originalRect.top,
originalRect.right, originalRect.bottom);
//將標誌位設回false
canPullDown = false;
canPullUp = false;
isMoved = false;
break;
case MotionEvent.ACTION_MOVE:
//在移動的過程中, 既沒有滾動到可以上拉的程度, 也沒有滾動到可以下拉的程度
if(!canPullDown && !canPullUp) {
startY = ev.getY();
canPullDown = isCanPullDown();
canPullUp = isCanPullUp();
break;
}
//計算手指移動的距離
float nowY = ev.getY();
int deltaY = (int) (nowY - startY);
//是否應該移動佈局
boolean shouldMove =
(canPullDown && deltaY > 0) //可以下拉, 並且手指向下移動
|| (canPullUp && deltaY< 0) //可以上拉, 並且手指向上移動
|| (canPullUp && canPullDown); //既可以上拉也可以下拉(這種情況出現在ScrollView包裹的控制元件比ScrollView還小)
if(shouldMove){
//計算偏移量
int offset = (int)(deltaY * MOVE_FACTOR);
//隨著手指的移動而移動佈局
contentView.layout(originalRect.left, originalRect.top + offset,
originalRect.right, originalRect.bottom + offset);
isMoved = true; //記錄移動了佈局
}
break;
default:
break;
}
return super.dispatchTouchEvent(ev);
}
//判斷是否滾動到頂部
private boolean isCanPullDown() {
return getScrollY() == 0 ||
contentView.getHeight() < getHeight() + getScrollY();
}
//判斷是否滾動到底部
private boolean isCanPullUp() {
return contentView.getHeight() <= getHeight() + getScrollY();
}
/**
* 繪製,利用顏色漸變方法,繪製上下顏色不一致
* @param canvas
*/
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//獲取View的寬高
int width = getWidth();
int height = getHeight();
int colorStart = getResources().getColor(R.color.yellow_bg);//開始
int color1 = Color.GRAY;
int colorEnd = getResources().getColor(R.color.bggray);
//LinearGradient線性漸變,這種設定的比較細膩,可設定多種顏色漸變
Paint paint = new Paint();
LinearGradient backGradient = new LinearGradient(0, 0, 0, height, new int[]{colorStart, colorEnd ,colorEnd}, null, Shader.TileMode.CLAMP);
paint.setShader(backGradient);
canvas.drawRect(0, 0, width, height, paint);
}
}
注意,因為Myreboundscrollview是繼承自Scrollview,因此要遵循Scrollview的使用原則
二,通過自定義重繪onDraw()方法,通過顏色漸變,設定上拉,下拉顏色不一致(適用於頁面頂部,底部顏色不一致),關鍵程式碼:
/**
* 繪製,利用顏色漸變方法,繪製上下顏色不一致
* @param canvas
*/
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//獲取View的寬高
int width = getWidth();
int height = getHeight();
int colorStart = getResources().getColor(R.color.yellow_bg);//開始
int color1 = Color.GRAY;
int colorEnd = getResources().getColor(R.color.bggray);
//LinearGradient線性漸變,
Paint paint = new Paint();
LinearGradient backGradient = new LinearGradient(0, 0, 0, height, new int[]{colorStart, colorEnd ,colorEnd}, null, Shader.TileMode.CLAMP);
paint.setShader(backGradient);
canvas.drawRect(0, 0, width, height, paint);
}
相關文章
- Android 顏色漸變 屬性動畫Android動畫
- CSS3文字顏色漸變效果CSSS3
- css3背景顏色漸變CSSS3
- 設定toast的字型顏色和背景顏色AST
- iOS兩種顏色的線性漸變 --DDGBannerScrollViewiOSView
- 利用CAGradientLayer自定義顏色漸變viewView
- recyclerView的側拉效果。上拉載入。下拉重新整理,點選事件等等View事件
- CSS設定元素的背景顏色CSS
- markdown字型顏色和背景設定
- svg 圖示設定背景顏色SVG
- 在LCD螢幕上漸變顯示sRGB所有範圍顏色, 最大可漸變16,581,375種顏色
- 短視訊系統,不改變背景顏色的基礎上更改邊框和字型顏色
- CSS 實現字型顏色漸變CSS
- 簡易的iOS導航欄顏色漸變方案iOS
- 樹上數顏色
- AUTOCAD——設定顏色
- win10系統如何設定Word背景顏色_win10 word頁面背景顏色設定步驟Win10
- Flutter改變狀態列字型、狀態列背景顏色、Appbar背景顏色的方式FlutterAPP
- 直播平臺搭建原始碼,Android進度條ProgressBar顏色的漸變設定原始碼Android
- js設定頁面TR 的屬性 背景顏色 樣式JS
- [譯] Android 實現顏色漸變的一個小 tipAndroid
- Android 沉浸式狀態列 漸變顏色的實現Android
- CSS設定選中網頁文字時的背景和顏色CSS網頁
- js計算線性漸變的中間顏色值JS
- 點選連結背景變色效果
- JavaScript WebGL 設定顏色JavaScriptWeb
- CAD如何設定顏色
- VC 對話方塊背景顏色、控制元件顏色控制元件
- iOS自定義MJRefresh上拉和下拉重新整理動畫iOS動畫
- Flutter——下拉重新整理,上拉載入Flutter
- 如何在 Mac 上更改資料夾顏色,改變 mac 資料夾顏色教程Mac
- Android 圓形ProgressBar 改變顏色Android
- 直播小程式原始碼,Swift 獲取漸變色顏色值原始碼Swift
- 使用 Promise 迴圈改變 div 背景顏色Promise
- 2024-07-24 記錄一則切換頁面背景顏色效果
- ECharts柱條漸變色設定以及常用漸變色Echarts
- CSS滑鼠懸浮行背景變色效果CSS
- 我的SCRT顏色設定