Android仿微信朋友圈實現(xiàn)滾動條下拉反彈效果
更新時間：2016年01月29日 10:31:01 作者：mmsx
這篇文章主要為大家介紹了Android仿微信朋友圈實現(xiàn)滾動條下拉反彈效果，感興趣的小伙伴們可以參考一下
微信朋友圈上面的圖片封面，QQ空間說說上面的圖片封面都有下拉反彈的效果，這些都是使用滾動條實現(xiàn)的。下拉，當(dāng)松開時候，反彈至原來的位置。下拉時候能看到背景圖片。那么這里簡單介紹一下這種效果的實現(xiàn)。
1、效果圖
這部手機顯示的分辨率有限，很老的手機調(diào)試。
2、具有反彈效果BounceScrollView
package com.org.scroll;
import android.content.Context;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.view.animation.TranslateAnimation;
import android.widget.ScrollView;
/**
* ScrollView反彈效果的實現(xiàn)
*/
public class BounceScrollView extends ScrollView {
private View inner;// 孩子View
private float y;// 點擊時y坐標(biāo)
// 矩形(這里只是個形式，只是用于判斷是否需要動畫.)
private Rect normal = new Rect();
private boolean isCount = false;// 是否開始計算
public BounceScrollView(Context context, AttributeSet attrs) {
super(context, attrs);
}
/***
* 根據(jù) XML 生成視圖工作完成.該函數(shù)在生成視圖的最后調(diào)用，在所有子視圖添加完之后. 即使子類覆蓋了 onFinishInflate
* 方法，也應(yīng)該調(diào)用父類的方法，使該方法得以執(zhí)行.
*/
@Override
protected void onFinishInflate() {
if (getChildCount() > 0) {
inner = getChildAt(0);
}
}
/***
* 監(jiān)聽touch
*/
@Override
public boolean onTouchEvent(MotionEvent ev) {
if (inner != null) {
commOnTouchEvent(ev);
}
return super.onTouchEvent(ev);
}
/***
* 觸摸事件
*
* @param ev
*/
public void commOnTouchEvent(MotionEvent ev) {
int action = ev.getAction();
switch (action) {
case MotionEvent.ACTION_DOWN:
break;
case MotionEvent.ACTION_UP:
// 手指松開.
if (isNeedAnimation()) {
animation();
isCount = false;
}
break;
/***
* 排除出第一次移動計算，因為第一次無法得知y坐標(biāo)， 在MotionEvent.ACTION_DOWN中獲取不到，
* 因為此時是MyScrollView的touch事件傳遞到到了LIstView的孩子item上面.所以從第二次計算開始.
* 然而我們也要進(jìn)行初始化，就是第一次移動的時候讓滑動距離歸0. 之后記錄準(zhǔn)確了就正常執(zhí)行.
*/
case MotionEvent.ACTION_MOVE:
final float preY = y;// 按下時的y坐標(biāo)
float nowY = ev.getY();// 時時y坐標(biāo)
int deltaY = (int) (preY - nowY);// 滑動距離
if (!isCount) {
deltaY = 0; // 在這里要歸0.
}
y = nowY;
// 當(dāng)滾動到最上或者最下時就不會再滾動，這時移動布局
if (isNeedMove()) {
// 初始化頭部矩形
if (normal.isEmpty()) {
// 保存正常的布局位置
normal.set(inner.getLeft(), inner.getTop(),
inner.getRight(), inner.getBottom());
}
// Log.e("jj", "矩形：" + inner.getLeft() + "," + inner.getTop()
// + "," + inner.getRight() + "," + inner.getBottom());
// 移動布局
inner.layout(inner.getLeft(), inner.getTop() - deltaY / 2,
inner.getRight(), inner.getBottom() - deltaY / 2);
}
isCount = true;
break;
default:
break;
}
}
/***
* 回縮動畫
*/
public void animation() {
// 開啟移動動畫
TranslateAnimation ta = new TranslateAnimation(0, 0, inner.getTop(),
normal.top);
ta.setDuration(200);
inner.startAnimation(ta);
// 設(shè)置回到正常的布局位置
inner.layout(normal.left, normal.top, normal.right, normal.bottom);
// Log.e("jj", "回歸：" + normal.left + "," + normal.top + "," + normal.right
// + "," + normal.bottom);
normal.setEmpty();
}
// 是否需要開啟動畫
public boolean isNeedAnimation() {
return !normal.isEmpty();
}
/***
* 是否需要移動布局 inner.getMeasuredHeight():獲取的是控件的總高度
*
* getHeight()：獲取的是屏幕的高度
*
* @return
*/
public boolean isNeedMove() {
int offset = inner.getMeasuredHeight() - getHeight();
int scrollY = getScrollY();
// Log.e("jj", "scrolly=" + scrollY);
// 0是頂部，后面那個是底部
if (scrollY == 0 || scrollY == offset) {
return true;
}
return false;
}
}
3、MainActivity
package com.org.activity;
import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.Window;
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.activity_main, menu);
return true;
}
}
這個沒做什么，主要看布局，以及BounceScrollView類。
4、activity_main布局
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<include layout="@layout/common_title_bg" />
<com.org.scroll.BounceScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/coversation_bg"
android:focusable="true"
android:focusableInTouchMode="true" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingTop="10.0dip" >
<RelativeLayout
android:id="@+id/accountSetting"
android:layout_width="fill_parent"
android:layout_height="63.0dip"
android:background="#80ffffff"
android:focusable="true" >
<FrameLayout
android:id="@+id/frameLayout1"
android:layout_width="54.0dip"
android:layout_height="54.0dip"
android:layout_centerVertical="true"
android:layout_marginLeft="10.0dip" >
<ImageView
android:id="@+id/face"
android:layout_width="50.0dip"
android:layout_height="50.0dip"
android:layout_gravity="center"
android:contentDescription="@null"
android:src="@drawable/h0" />
<ImageView
android:id="@+id/statusIcon"
android:layout_width="18.0dip"
android:layout_height="18.0dip"
android:layout_gravity="bottom|right|center"
android:contentDescription="@null" />
</FrameLayout>
<ImageView
android:id="@+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="10.0dip"
android:contentDescription="@null"
android:duplicateParentState="true" />
<TextView
android:id="@+id/status"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="@+id/nick"
android:layout_marginRight="10.0dip"
android:layout_toLeftOf="@id/imageView1"
android:duplicateParentState="true"
android:text="在線" />
<TextView
android:id="@+id/nick"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="10.0dip"
android:layout_marginRight="69.0dip"
android:layout_toRightOf="@id/frameLayout1"
android:duplicateParentState="true"
android:ellipsize="end"
android:singleLine="true" />
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="600dp"
android:layout_marginTop="16.0dip"
android:layout_weight="2.13"
android:background="#ffffffff"
android:orientation="vertical" >
<TextView
android:id="@+id/my_profile"
android:layout_width="fill_parent"
android:layout_height="44.0dip"
android:background="#800000ff"
android:clickable="true"
android:gravity="center_vertical"
android:paddingLeft="10.0dip"
android:paddingRight="10.0dip"
android:text="標(biāo)題一" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16.0dip"
android:orientation="vertical" >
<RelativeLayout
android:id="@+id/set_feedback"
android:layout_width="fill_parent"
android:layout_height="44.0dip"
android:background="#8000ffff"
android:clickable="true"
android:focusable="true" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="12.0dip"
android:duplicateParentState="true"
android:gravity="center_vertical"
android:text="反饋" />
</RelativeLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</com.org.scroll.BounceScrollView>
</LinearLayout>
希望本文對大家學(xué)習(xí)Android軟件編程有所幫助。
相關(guān)文章
Flutter使用NetworkImage實現(xiàn)圖像顯示效果
這篇文章主要為大家介紹了如何在Flutter中使用NetworkImage實現(xiàn)圖像顯示效果，文中的示例代碼講解詳細(xì)，快跟隨小編一起學(xué)習(xí)一下吧2022-04-04
這篇文章主要為大家詳細(xì)介紹了Android實現(xiàn)讀取NFC卡的編號，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
flutter 輪播圖動態(tài)加載網(wǎng)絡(luò)圖片的方法
Flutter是谷歌的移動UI框架，可以快速在iOS和Android上構(gòu)建高質(zhì)量的原生用戶界面。這篇文章主要介紹了flutter 輪播圖動態(tài)加載網(wǎng)絡(luò)圖片的方法 ,需要的朋友可以參考下2019-07-07
這篇文章主要為大家詳細(xì)介紹了Android本地驗證碼的生成，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-01-01
Android 通過SQLite數(shù)據(jù)庫實現(xiàn)數(shù)據(jù)存儲管理
SQLiteOpenHelper 是Android 提供的一個抽象工具類，負(fù)責(zé)管理數(shù)據(jù)庫的創(chuàng)建、升級工作。本文主要介紹了如何使用SQLite數(shù)據(jù)庫實現(xiàn)對數(shù)據(jù)進(jìn)行存儲管理，感興趣的可以了解一下2021-11-11
Android編程實現(xiàn)分頁加載ListView功能示例
這篇文章主要介紹了Android編程實現(xiàn)分頁加載ListView功能,結(jié)合實例形式分析了listview分頁加載的原理、實現(xiàn)技巧與相關(guān)注意事項,需要的朋友可以參考下2017-02-02
Android EditText限制輸入字符類型的方法總結(jié)
這篇文章主要介紹了Android EditText限制輸入字符類型的方法總結(jié)的相關(guān)資料,需要的朋友可以參考下2017-03-03
今天小編就為大家分享一篇關(guān)于Android UI開發(fā)中所遇到的各種坑，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2018-12-12
這篇文章主要介紹了Android編程實現(xiàn)wifi掃描及連接的方法,涉及Android網(wǎng)絡(luò)操作掃描、查找、連接、線程等相關(guān)操作技巧,需要的朋友可以參考下2018-02-02
Android 使用FragmentTabHost實現(xiàn)底部菜單功能
這篇文章主要介紹了Android 使用FragmentTabHost實現(xiàn)底部菜單功能,詳細(xì)給大家介紹了FragmentTabHost配合Fragment的使用方法，需要的朋友可以參考下2017-12-12