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);
}
相關文章
- iOS 背景圖層的顏色漸變效果iOS
- javascript網頁背景顏色漸變效果JavaScript網頁
- css樣式背景顏色漸變效果CSS
- css3背景顏色漸變CSSS3
- Android 顏色漸變 屬性動畫Android動畫
- 相容低版本IE瀏覽器的背景顏色漸變效果瀏覽器
- CSS3文字顏色漸變效果CSSS3
- 設定toast的字型顏色和背景顏色AST
- iOS CAGradientLayer顏色漸變iOS
- css 設定背景顏色CSS
- iOS button背景顏色狀態設定iOS
- iOS 導航欄背景顏色完全透明及漸變iOS
- recyclerView的側拉效果。上拉載入。下拉重新整理,點選事件等等View事件
- IOS設定狀態列的背景顏色iOS
- CSS3 文字字型顏色動態漸變效果CSSS3
- javascript文字彩虹式顏色漸變效果程式碼例項JavaScript
- css3實現的文字顏色漸變和漸隱效果CSSS3
- UITabBarController、TabBar背景顏色設定、TabBarItem顏色處理UItabBarController
- iOS UISearchBar 修改背景顏色iOSUI
- 利用CAGradientLayer自定義顏色漸變viewView
- CSS設定元素的背景顏色CSS
- markdown字型顏色和背景設定
- js設定輸入的文字不同顏色效果JS
- iOS兩種顏色的線性漸變 --DDGBannerScrollViewiOSView
- 短視訊系統,不改變背景顏色的基礎上更改邊框和字型顏色
- 樹上數顏色
- iOS 導航欄顏色透明度漸變iOS
- CSS 顏色漸變的程式碼.CSS
- 上拉重新整理,下拉載入
- iOS 顏色製作背景圖片iOS
- JavaScript 背景顏色隨機變化JavaScript隨機
- 設定TextView按下時變換文字顏色TextView
- Android 濾鏡效果和顏色通道過濾Android
- win10系統如何設定Word背景顏色_win10 word頁面背景顏色設定步驟Win10
- 簡易的iOS導航欄顏色漸變方案iOS
- Swift iOS : 上拉重新整理或者下拉重新整理SwiftiOS
- js設定頁面TR 的屬性 背景顏色 樣式JS
- CSS--border邊框顏色漸變CSS