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

This article mainly introduces the relevant knowledge of "how to achieve the sliding suspension fixation effect of Android view". The editor shows you the operation process through the actual case, the operation method is simple and fast, and the practicality is strong. I hope this article "how to achieve the sliding suspension fixation effect of Android view" can help you solve the problem.

1. Background

During the development of a project, there is sometimes a need to pin the sub-view at the top at some point during the sliding process (it is common to fix the tab in the interface when sliding to the top).

Effect picture:

two。 Train of thought

(CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout) + TabLayout+ViewPager

3. Code implementation

a. Master layout code

It is important to note that:

The app:layout_scrollFlags= "scroll | exitUntilCollapsed"-- > setting can slide and the current view can exit until the collapsed view appears.

-- > the child view layout referenced is actually a ViewPager (note that you should set: app:layout_behavior= "@ string/appbar_scrolling_view_behavior" in the layout)

b. Main interface Activity code

Public class ScrollingActivity extends AppCompatActivity {private TabLayout tabLayout; private ViewPager viewPager; @ Override protected void onCreate (Bundle savedInstanceState) {super.onCreate (savedInstanceState); setContentView (R.layout.activity_scrolling); initViews ();} private void initViews () {tabLayout = (TabLayout) findViewById (R.id.tabLayout); viewPager = (ViewPager) findViewById (R.id.viewPager); viewPager.setOffscreenPageLimit (2); viewPager.setAdapter (new MPagerAdapter (getSupportFragmentManager () TabLayout.setupWithViewPager (viewPager);}}

c. Adapter MPagerAdapter code

Public class MPagerAdapter extends FragmentStatePagerAdapter {private String [] tabTitle = new String [] {"tab01", "tab02"}; private FirstFragment firstFragment; private SecondFragment secondFragment; public MPagerAdapter (FragmentManager fm) {super (fm);} @ Override public Fragment getItem (int position) {if (position = = 0) {if (firstFragment = = null) {firstFragment = new FirstFragment ();} return firstFragment } else if (position = = 1) {if (secondFragment = = null) {secondFragment = new SecondFragment ();} return secondFragment;} return null;} @ Override public int getCount () {return tabTitle.length;} @ Override public CharSequence getPageTitle (int position) {return tabTitle [position];}}

The code for two Fragment is very simple. Just load the layout, so I won't post it here.

4. Expansion

a. On the influence of the sequence of neutron view in CollapsingToolbarLayout on the display result

As shown in the figure:

You can see that the black border in the figure shows inconsistent content, so the order of ToolBar and ImageView will affect the display result of the view.

Speculate-- > the profile display effects of the above three different view sequences in CollapsingToolbarLayout are as follows:

Order: Toolbar-- > ImageView-- > TabLayout (set layout_gravity= "bottom")

Order: ImageView-- > Toolbar-- > TabLayout (set layout_gravity= "bottom")

Irresponsible guess: think of Toolbar as a canvas, and only content covered within the canvas projection area is displayed in that canvas.

(therefore, 1. The content under the canvas cannot be displayed; 2. The contents of the canvas that cannot be overridden are displayed as the default style of the canvas)

So, if you don't want parallax, set the height of Toolbar to be the same as that of TabLayout. If you remove the Toolbar, the View in all CollapsingToolbarLayout will slide out of the interface, and the layout will become a normal layout (equivalent to CollapsingToolbarLayout becoming CollapsingLayout).

b. Remove Toolbar to achieve fixed effect

Simply move the TabLayout from CollapsingToolbarLayout to the first-level child View of AppBarLayout.

(this also avoids the problem of incomplete display in CollapsingToolbarLayout because of the overlay of the view, which will cause the entire ImageView to be partially covered by TabLayout. )

This is the end of the content about "how to achieve the effect of sliding suspension and fixing in Android view". Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.