Implementation function:
1. The module bar at the bottom of the APP main interface
2. ViewPager displays multiple interfaces on one screen
3、........
First of all, you need to understand the meaning of this attribute, that is,
Whether to allow the child View to exceed the return of the parent View, there are two values true, false, the default is true
When using, set android:clipChildren="false" to both the child View and the root node View control, then the child View will not be restricted to the parent View.
-------------------------------------------------------------------------------------------------------------
The following examples are often used in two projects to illustrate:
1. The module bar at the bottom of the APP main interface
It can be seen that there is actually a ViewGroup at the bottom (LinearLayout or RelativeLayout gray background part)
But we require that the icon button in the middle is slightly larger than the others, then normally we write the following in a LinearLayout.
Because ViewGroup has height restrictions, it also limits the height of its internal sub-Views, which obviously cannot meet our needs. Then we need a property so that the child View can not be restricted by the parent container
This uses the android:clipChildren attribute
We only need to set this property for the root node control and child Views that do not want to be restricted by the parent container: android:clipChildren="false" That's it
Layout code:
<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:background="#fff" android:clipChildren="false" tools:context="com.xqx.com.treat.ui.user.Login"> <LinearLayout android:layout_width="match_parent" android:layout_height="45dp" android:orientation="horizontal" android:layout_gravity="bottom" android:background="#ddd" > <ImageView android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:background="#0000" android:scaleType="fitCenter" android:src="@mipmap/ic_launcher" /> <ImageView android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:background="#0000" android:scaleType="fitCenter" android:src="@mipmap/ic_launcher" /> <ImageView android:layout_width="0dp" android:layout_height="65dp" android:layout_weight="1" android:background="#0000" android:layout_gravity="bottom" android:scaleType="fitCenter" android:src="@mipmap/ic_launcher" /> <ImageView android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:background="#0000" android:scaleType="fitCenter" android:src="@mipmap/ic_launcher" /> <ImageView android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:background="#0000" android:scaleType="fitCenter" android:src="@mipmap/ic_launcher" /> </LinearLayout> </LinearLayout>
2. Implement ViewPager scrolling with multiple views on one screen
For details, please refer to the major APP application markets, the application details interface, there will be similar pictures scrolling to display the part of the application function
First of all, to realize this function, we need to understand ViewPager, Android development _ In-depth study of ViewPager control
Students who know ViewPager know that under normal circumstances, our mobile phone interface will only display a sub-View view of viewpager
So what should we do if we need to implement a mobile interface that can see multiple subViews?
In fact, it is very simple. It is assumed that everyone will use ViewPager and the effect of ViewPager has been written.
first step:
We only need to add the android:clipChildren="false" attribute to the ViewPager control and its corresponding root control in the layout file on the original basis
Step 2:
Set the left and right margin properties of ViewPager
android:layout_marginRight="80dp" android:layout_marginLeft="80dp"
What is the purpose of setting these two properties?
First, we normally set the width of the ViewPager control to be
android:layout_width="match_parent"
After we set the distance from the left and right controls, the realistic width of the ViewPager will be narrowed, as shown in the figure, the blue box is the visible part of the viewpager
Plus the first step of the settings
In the end, this is the case: in an interface, we can see at least two child Views (orange, blue View views) in the viewpager.
Note: There will be a bug in this approach, that is, only the View in the middle can be slid, and what if we want to click the View on the left or the right to slide?
Solution: Distribute the touch event of the parent class to viewPgaer, R.id.ly is the parent container of the ViewPager control
findViewById(R.id.ly).setOnTouchListener(new View.OnTouchListener() { @Override public boolean onTouch(View v, MotionEvent event) { return viewpager.dispatchTouchEvent(event); } });
In addition, dynamically setting the spacing for the ViewPager control in the activity code will also greatly improve the effect.
viewpager.setPageMargin(8);
ViewPager scrolling effect:
ViewPager switching animation (effective after version 3.0)
Effect picture:
Layout file code:
<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" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:paddingBottom="@dimen/activity_vertical_margin" android:background="#fff" android:id="@+id/ly" android:clipChildren="false" tools:context="com.xqx.com.treat.ViewPagerActivity"> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_centerInParent="true" android:clipChildren="false" android:layout_marginRight="80dp" android:layout_marginLeft="80dp" ></android.support.v4.view.ViewPager> </RelativeLayout>