Shulou(Shulou.com)06/03 Report--

Editor to share with you how to use Android to imitate JD.com top search box sliding stretch animation effect, I believe that most people do not know much, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

The compilation of layout files

According to the effect, we can analyze the functional layout effect I want to do. First of all, the whole layout has a sliding operation area of the head, including the title bar and the search bar, and then the whole layout also contains a sliding control. We can use ScrollView or NestedScrollView. In the process, we need to monitor to get the sliding distance up and down, so we need to customize our sliding control to get the sliding distance:

Custom sliding controls: 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 makes the displacement effect smoother to solve the problem of finger jitter while holding and holding}

Here I use NestedScrollView to implement custom controls, and ScrollView has the same effect. The listening method of sliding is mainly set in the middle to get the sliding distance.

After implementing the custom control, we began to write the layout file:

Layout files: activity_search

The layout file here is the code to achieve the effect of Anjuke. If you want to achieve the effect of JD.com, you only need to set the attribute of search_ll_search for the layout file:

Delete the code:

Android:layout_centerHorizontal= "true"

Add code:

Android:layout_alignParentLeft= "true"

Then modify the logical code parameters, which will be described later.

Logical processing

In the logic part, the width and top distance of the search bar are dynamically modified according to the sliding distance, and the boundary is set at the same time.

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) / / LL_SEARCH_MAX_TOP_MARGIN = CommonUtil.dp2px (this, 49f) when the layout is closed; / / LL_SEARCH_MAX_WIDTH = CommonUtil.getScreenWidth (this)-CommonUtil.dp2px (this, 30f) when the layout is expanded by default; / / LL_SEARCH_MIN_WIDTH = CommonUtil.getScreenWidth (this)-CommonUtil.dp2px (this, 82f) when the layout is expanded by default / / TV_TITLE_MAX_TOP_MARGIN = CommonUtil.dp2px (this, 11.5f) when the layout is closed; 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) / / here * 1.3f can set the rate of search box width scaling float titleNewTopMargin = (float) (TV_TITLE_MAX_TOP_MARGIN-dy * 0.5); / / deal with the boundary problem of layout 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 = 255th * titleNewTopMargin / TV_TITLE_MAX_TOP_MARGIN; if (titleAlpha < 0) {titleAlpha = 0 } / / set the LayoutParams of related controls. MarginLayoutParams is used here to facilitate setting the topMargin property tv_title.setTextColor of params (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);}});}}

All the specific codes have corresponding comments. What needs to be explained is that here is also the code that implements the effect of Anjuke. If you want to achieve the effect of JD.com, you need to make relevant changes here:

1. Change the minimum width of the search bar:

LL_SEARCH_MIN_WIDTH = CommonUtil.getScreenWidth (this)-CommonUtil.dp2px (this, 122f); / / width when layout is closed

two。 Sets the rate at which the search box width is scaled

Float searchLayoutNewWidth = LL_SEARCH_MAX_WIDTH-dy * 3.0f / here * 1.3f can set the rate at which the search box width is scaled.

Through these two steps of modification, combined with the modification of the layout file mentioned above, the effect of JD.com can be achieved.

Note:

1. The LayoutParams we use in the file is MarginLayoutParams, which is mainly for us to set the topMargin property of the related controls. 2. CommonUtil in the file is a public class of methods, which is mainly used to obtain the width of the screen and the conversion between dp and px. The related methods are as follows:

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;}

The above is all the contents of this article entitled "how to use Android to imitate JD.com 's top search box to slide and stretch animation effects". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.