Android仿微信朋友圈實(shí)現(xiàn)滾動(dòng)條下拉反彈效果
更新時(shí)間：2016年01月29日 10:31:01 作者：mmsx
這篇文章主要為大家介紹了Android仿微信朋友圈實(shí)現(xiàn)滾動(dòng)條下拉反彈效果，感興趣的小伙伴們可以參考一下
微信朋友圈上面的圖片封面，QQ空間說(shuō)說(shuō)上面的圖片封面都有下拉反彈的效果，這些都是使用滾動(dòng)條實(shí)現(xiàn)的。下拉，當(dāng)松開(kāi)時(shí)候，反彈至原來(lái)的位置。下拉時(shí)候能看到背景圖片。那么這里簡(jiǎn)單介紹一下這種效果的實(shí)現(xiàn)。
1、效果圖
這部手機(jī)顯示的分辨率有限，很老的手機(jī)調(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反彈效果的實(shí)現(xiàn)
*/
public class BounceScrollView extends ScrollView {
private View inner;// 孩子View
private float y;// 點(diǎn)擊時(shí)y坐標(biāo)
// 矩形(這里只是個(gè)形式，只是用于判斷是否需要?jiǎng)赢?huà).)
private Rect normal = new Rect();
private boolean isCount = false;// 是否開(kāi)始計(jì)算
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)聽(tīng)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:
// 手指松開(kāi).
if (isNeedAnimation()) {
animation();
isCount = false;
}
break;
/***
* 排除出第一次移動(dòng)計(jì)算，因?yàn)榈谝淮螣o(wú)法得知y坐標(biāo)， 在MotionEvent.ACTION_DOWN中獲取不到，
* 因?yàn)榇藭r(shí)是MyScrollView的touch事件傳遞到到了LIstView的孩子item上面.所以從第二次計(jì)算開(kāi)始.
* 然而我們也要進(jìn)行初始化，就是第一次移動(dòng)的時(shí)候讓滑動(dòng)距離歸0. 之后記錄準(zhǔn)確了就正常執(zhí)行.
*/
case MotionEvent.ACTION_MOVE:
final float preY = y;// 按下時(shí)的y坐標(biāo)
float nowY = ev.getY();// 時(shí)時(shí)y坐標(biāo)
int deltaY = (int) (preY - nowY);// 滑動(dòng)距離
if (!isCount) {
deltaY = 0; // 在這里要?dú)w0.
}
y = nowY;
// 當(dāng)滾動(dòng)到最上或者最下時(shí)就不會(huì)再滾動(dòng)，這時(shí)移動(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());
// 移動(dòng)布局
inner.layout(inner.getLeft(), inner.getTop() - deltaY / 2,
inner.getRight(), inner.getBottom() - deltaY / 2);
}
isCount = true;
break;
default:
break;
}
}
/***
* 回縮動(dòng)畫(huà)
*/
public void animation() {
// 開(kāi)啟移動(dòng)動(dòng)畫(huà)
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();
}
// 是否需要開(kāi)啟動(dòng)畫(huà)
public boolean isNeedAnimation() {
return !normal.isEmpty();
}
/***
* 是否需要移動(dòng)布局 inner.getMeasuredHeight():獲取的是控件的總高度
*
* getHeight()：獲取的是屏幕的高度
*
* @return
*/
public boolean isNeedMove() {
int offset = inner.getMeasuredHeight() - getHeight();
int scrollY = getScrollY();
// Log.e("jj", "scrolly=" + scrollY);
// 0是頂部，后面那個(gè)是底部
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;
}
}
這個(gè)沒(méi)做什么，主要看布局，以及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>
源碼下載：Android實(shí)現(xiàn)滾動(dòng)條下拉反彈效果
希望本文對(duì)大家學(xué)習(xí)Android軟件編程有所幫助。
相關(guān)文章
Flutter使用NetworkImage實(shí)現(xiàn)圖像顯示效果
這篇文章主要為大家介紹了如何在Flutter中使用NetworkImage實(shí)現(xiàn)圖像顯示效果，文中的示例代碼講解詳細(xì)，快跟隨小編一起學(xué)習(xí)一下吧2022-04-04
Android實(shí)現(xiàn)讀取NFC卡的編號(hào)
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)讀取NFC卡的編號(hào)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
flutter 輪播圖動(dòng)態(tài)加載網(wǎng)絡(luò)圖片的方法
Flutter是谷歌的移動(dòng)UI框架，可以快速在iOS和Android上構(gòu)建高質(zhì)量的原生用戶界面。這篇文章主要介紹了flutter 輪播圖動(dòng)態(tài)加載網(wǎng)絡(luò)圖片的方法 ,需要的朋友可以參考下2019-07-07
這篇文章主要為大家詳細(xì)介紹了Android本地驗(yàn)證碼的生成，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-01-01
Android 通過(guò)SQLite數(shù)據(jù)庫(kù)實(shí)現(xiàn)數(shù)據(jù)存儲(chǔ)管理
SQLiteOpenHelper 是Android 提供的一個(gè)抽象工具類，負(fù)責(zé)管理數(shù)據(jù)庫(kù)的創(chuàng)建、升級(jí)工作。本文主要介紹了如何使用SQLite數(shù)據(jù)庫(kù)實(shí)現(xiàn)對(duì)數(shù)據(jù)進(jìn)行存儲(chǔ)管理，感興趣的可以了解一下2021-11-11
Android編程實(shí)現(xiàn)分頁(yè)加載ListView功能示例
這篇文章主要介紹了Android編程實(shí)現(xiàn)分頁(yè)加載ListView功能,結(jié)合實(shí)例形式分析了listview分頁(yè)加載的原理、實(shí)現(xiàn)技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-02-02
Android EditText限制輸入字符類型的方法總結(jié)
這篇文章主要介紹了Android EditText限制輸入字符類型的方法總結(jié)的相關(guān)資料,需要的朋友可以參考下2017-03-03
今天小編就為大家分享一篇關(guān)于Android UI開(kāi)發(fā)中所遇到的各種坑，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧2018-12-12
Android編程實(shí)現(xiàn)wifi掃描及連接的方法
這篇文章主要介紹了Android編程實(shí)現(xiàn)wifi掃描及連接的方法,涉及Android網(wǎng)絡(luò)操作掃描、查找、連接、線程等相關(guān)操作技巧,需要的朋友可以參考下2018-02-02
Android 使用FragmentTabHost實(shí)現(xiàn)底部菜單功能
這篇文章主要介紹了Android 使用FragmentTabHost實(shí)現(xiàn)底部菜單功能,詳細(xì)給大家介紹了FragmentTabHost配合Fragment的使用方法，需要的朋友可以參考下2017-12-12