小編給大家分享一下如何使用Android仿京東頂部搜索框滑動(dòng)伸縮動(dòng)畫(huà)效果，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛(ài)。我們立志把好的技術(shù)通過(guò)有效、簡(jiǎn)單的方式提供給客戶，將通過(guò)不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：國(guó)際域名空間、雅安服務(wù)器托管、營(yíng)銷(xiāo)軟件、網(wǎng)站建設(shè)、塔什庫(kù)爾干塔吉克網(wǎng)站維護(hù)、網(wǎng)站推廣。

布局文件的編寫(xiě)

根據(jù)效果我們可以分析我的要做的功能布局效果，首先，整個(gè)布局存在一個(gè)頭部的滑動(dòng)操作區(qū)域，包括標(biāo)題欄和搜索欄，然后整個(gè)布局還包含了一個(gè)滑動(dòng)控件，滑動(dòng)控件我們可以使用ScrollView或者NestedScrollView，過(guò)程中我們需要監(jiān)聽(tīng)獲取上下滑動(dòng)的距離，因此需要自定義我們的滑動(dòng)控件，獲取滑動(dòng)的距離：

自定義滑動(dòng)控件：AnimationNestedScrollView

public class AnimationNestedScrollView extends NestedScrollView { private OnAnimationScrollChangeListener listener; public AnimationNestedScrollView(@NonNull Context context) { super(context); } public AnimationNestedScrollView(@NonNull Context context, @Nullable AttributeSet attrs) { super(context, attrs); } public AnimationNestedScrollView(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); } public void setOnAnimationScrollListener(OnAnimationScrollChangeListener listener) { this.listener = listener; } public interface OnAnimationScrollChangeListener { void onScrollChanged(float dy); } @Override protected void onScrollChanged(int l, int t, int oldl, int oldt) { super.onScrollChanged(l, t, oldl, oldt); if (listener != null) { listener.onScrollChanged(getScrollY() * 0.65f);//x0.65 使位移效果更加平滑 解決手指按住停留時(shí)抖動(dòng)問(wèn)題 } }}

這里我使用了NestedScrollView 來(lái)實(shí)現(xiàn)自定義控件，使用ScrollView也是一樣的效果， 中間主要設(shè)置了滑動(dòng)的監(jiān)聽(tīng)方法，獲取滑動(dòng)的距離。

實(shí)現(xiàn)了自定義控件后，我們開(kāi)始編寫(xiě)布局文件：

布局文件：activity_search

<?xml version="1.0" encoding="utf-8"?><RelativeLayout 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" tools:context="com.cjxj.androiddemo.activity.SearchActivity"> <RelativeLayout android:id="@+id/search_rl_top" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#3F51B5"> <RelativeLayout android:id="@+id/search_layout" android:layout_width="match_parent" android:layout_height="44dp"> <ImageView android:id="@+id/search_iv_back" android:layout_width="10dp" android:layout_height="20dp" android:layout_alignParentLeft="true" android:layout_centerVertical="true" android:layout_marginLeft="20dp" android:src="@drawable/video_back" /> <TextView android:id="@+id/search_tv_title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_marginTop="11.5dp" android:gravity="center" android:text="這是標(biāo)題" android:textColor="#fff" android:textSize="17dp" android:textStyle="bold" /> </RelativeLayout> <LinearLayout android:id="@+id/search_ll_search" android:layout_width="match_parent" android:layout_height="35dp" android:layout_centerHorizontal="true" android:layout_marginLeft="15dp" android:layout_marginTop="49dp" android:layout_marginRight="15dp" android:layout_marginBottom="10dp" android:background="@drawable/activity_search_tv_shape" android:gravity="center_vertical" android:orientation="horizontal" android:visibility="visible"> <ImageView android:layout_width="16dp" android:layout_height="16dp" android:layout_marginLeft="10dp" android:src="@drawable/ic_search" /> <TextView android:id="@+id/search_tv_search" android:layout_width="0dp" android:layout_height="match_parent" android:layout_marginLeft="5dp" android:layout_marginRight="10dp" android:layout_weight="1" android:cursorVisible="false" android:gravity="center_vertical|center_horizontal" android:hint="這是搜索框" android:textSize="15dp" /> <ImageView android:layout_width="16dp" android:layout_height="16dp" android:layout_marginRight="10dp" android:src="@drawable/ic_search" /> </LinearLayout> </RelativeLayout> <com.cjxj.androiddemo.view.AnimationNestedScrollView android:id="@+id/search_sv_view" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_below="@id/search_rl_top"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:descendantFocusability="blocksDescendants" android:orientation="vertical"> <TextView android:layout_width="match_parent" android:layout_height="900dp" /> </LinearLayout> </com.cjxj.androiddemo.view.AnimationNestedScrollView></RelativeLayout>

這里的布局文件是實(shí)現(xiàn)安居客的效果的代碼，如果要實(shí)現(xiàn)京東的效果，布局文件只需要設(shè)置search_ll_search的屬性即可：

刪除代碼：

android:layout_centerHorizontal="true"

添加代碼：

android:layout_alignParentLeft="true"

然后再修改邏輯代碼參數(shù)即可，后面會(huì)介紹。

邏輯的處理

邏輯部分，主要是根據(jù)滑動(dòng)距離，動(dòng)態(tài)的修改搜索欄的寬度和頂部距離，同時(shí)設(shè)置邊界即可。

public class SearchActivity extends AppCompatActivity { private AnimationNestedScrollView sv_view; private LinearLayout ll_search; private TextView tv_title; private float LL_SEARCH_MIN_TOP_MARGIN, LL_SEARCH_MAX_TOP_MARGIN, LL_SEARCH_MAX_WIDTH, LL_SEARCH_MIN_WIDTH, TV_TITLE_MAX_TOP_MARGIN; private ViewGroup.MarginLayoutParams searchLayoutParams, titleLayoutParams; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_search); initView(); } private void initView() { sv_view = findViewById(R.id.search_sv_view); ll_search = findViewById(R.id.search_ll_search); tv_title = findViewById(R.id.search_tv_title); searchLayoutParams = (ViewGroup.MarginLayoutParams) ll_search.getLayoutParams(); titleLayoutParams = (ViewGroup.MarginLayoutParams) tv_title.getLayoutParams(); LL_SEARCH_MIN_TOP_MARGIN = CommonUtil.dp2px(this, 4.5f);//布局關(guān)閉時(shí)頂部距離 LL_SEARCH_MAX_TOP_MARGIN = CommonUtil.dp2px(this, 49f);//布局默認(rèn)展開(kāi)時(shí)頂部距離 LL_SEARCH_MAX_WIDTH = CommonUtil.getScreenWidth(this) - CommonUtil.dp2px(this, 30f);//布局默認(rèn)展開(kāi)時(shí)的寬度 LL_SEARCH_MIN_WIDTH = CommonUtil.getScreenWidth(this) - CommonUtil.dp2px(this, 82f);//布局關(guān)閉時(shí)的寬度 TV_TITLE_MAX_TOP_MARGIN = CommonUtil.dp2px(this, 11.5f); sv_view.setOnAnimationScrollListener(new AnimationNestedScrollView.OnAnimationScrollChangeListener() { @Override public void onScrollChanged(float dy) { float searchLayoutNewTopMargin = LL_SEARCH_MAX_TOP_MARGIN - dy; float searchLayoutNewWidth = LL_SEARCH_MAX_WIDTH - dy * 1.3f;//此處 * 1.3f 可以設(shè)置搜索框?qū)挾瓤s放的速率 float titleNewTopMargin = (float) (TV_TITLE_MAX_TOP_MARGIN - dy * 0.5); //處理布局的邊界問(wèn)題 searchLayoutNewWidth = searchLayoutNewWidth < LL_SEARCH_MIN_WIDTH ? LL_SEARCH_MIN_WIDTH : searchLayoutNewWidth; if (searchLayoutNewTopMargin < LL_SEARCH_MIN_TOP_MARGIN) {  searchLayoutNewTopMargin = LL_SEARCH_MIN_TOP_MARGIN; } if (searchLayoutNewWidth < LL_SEARCH_MIN_WIDTH) {  searchLayoutNewWidth = LL_SEARCH_MIN_WIDTH; } float titleAlpha = 255 * titleNewTopMargin / TV_TITLE_MAX_TOP_MARGIN; if (titleAlpha < 0) {  titleAlpha = 0; } //設(shè)置相關(guān)控件的LayoutParams 此處使用的是MarginLayoutParams，便于設(shè)置params的topMargin屬性 tv_title.setTextColor(tv_title.getTextColors().withAlpha((int) titleAlpha)); titleLayoutParams.topMargin = (int) titleNewTopMargin; tv_title.setLayoutParams(titleLayoutParams); searchLayoutParams.topMargin = (int) searchLayoutNewTopMargin; searchLayoutParams.width = (int) searchLayoutNewWidth; ll_search.setLayoutParams(searchLayoutParams); } }); }}

具體的代碼都有相應(yīng)的注釋，需要解釋的是，這里同樣是實(shí)現(xiàn)安居客的效果的代碼，如果要實(shí)現(xiàn)京東效果，這里需要做相關(guān)修改：

1.修改搜索欄的最小寬度：

LL_SEARCH_MIN_WIDTH = CommonUtil.getScreenWidth(this) - CommonUtil.dp2px(this, 122f);//布局關(guān)閉時(shí)的寬度

2.設(shè)置搜索框?qū)挾瓤s放的速率

float searchLayoutNewWidth = LL_SEARCH_MAX_WIDTH - dy * 3.0f;//此處 * 1.3f 可以設(shè)置搜索框?qū)挾瓤s放的速率

通過(guò)這兩步修改，結(jié)合上文說(shuō)的布局文件的修改，即可實(shí)現(xiàn)京東的效果。

注：

1.文件中我們使用的LayoutParams是MarginLayoutParams，主要是便于我們?cè)O(shè)置相關(guān)控件的topMargin屬性.2.文件中CommonUtil是方法公共類，主要是用于獲取屏幕的寬度，以及dp和px的轉(zhuǎn)換，相關(guān)方法如下：

public static int dp2px(Context context, float dpValue) { if (null == context) { return 0; } final float scale = context.getResources().getDisplayMetrics().density; return (int) (dpValue * scale + 0.5f); }//...public static int getScreenWidth(Context context) { if (null == context) { return 0; } return context.getResources().getDisplayMetrics().widthPixels; }

以上是“如何使用Android仿京東頂部搜索框滑動(dòng)伸縮動(dòng)畫(huà)效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站名稱：如何使用Android仿京東頂部搜索框滑動(dòng)伸縮動(dòng)畫(huà)效果-創(chuàng)新互聯(lián)
鏈接URL：http://m.rwnh.cn/article6/cssjig.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營(yíng)銷(xiāo)、面包屑導(dǎo)航、動(dòng)態(tài)網(wǎng)站、定制開(kāi)發(fā)、關(guān)鍵詞優(yōu)化、ChatGPT

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)