Android Development Combat (21): Talking about Android:clipchildren properties

Original: Android Development Combat (21): Talking about Android:clipchildren Property

Implementation features:

1, the app main interface bottom module bar

2, Viewpager one screen multiple interface display

3 、........

First you need to understand the meaning of this property, namely

Whether to allow child view to exceed the return of the parent view, with two values True, False, default True

When used, the child view and root node view controls are set to Android:clipchildren= "false", so this sub-view is not restricted to the parent view

-------------------------------------------------------------------------------------------------------------

The following examples are used in two projects to illustrate:

1, the app main interface bottom module bar

Can see the bottom actually has a viewgroup (LinearLayout or relativelayout gray background part)

But we ask the middle one icon button is slightly bigger than the other, then normal we write in a linearlayout will appear the following situation

Because ViewGroup has a high limit, he also limits the height of its internal sub-view, which is clearly not up to our needs. Then we need a property to let the child view be not restricted by the parent container

This is going to use the Android:clipchildren property.

We only need to set this property to the root node control and the child view that does not want to be restricted by the parent container : android:clipchildren= "false" to

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>

Main

2, realize viewpager one screen multiple view scrolling

See the Big app market, application Details screen, there will be similar to the picture scrolling to show the application function of the section

First, we need to understand Viewpager, Android development _ Deep Learning Viewpager controls

Understand Viewpager's classmates know, under normal circumstances we a mobile interface will only show a viewpager child view view

So what do we need to do to implement a mobile interface that can see multiple child view views?

In fact, it's very simple, assuming that we all use Viewpager and have written the Viewpager effect.

The first step:

We only need to add android:clipchildren= "false" property to the Viewpager control and its corresponding root control in the layout file based on the original.

Step Two:

Set the left and right margin properties of the 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"

When we set the distance between the left and right controls, we make the viewpager realistic width narrower, and the blue box part is the Viewpager visible part.

Plus the first step setting

The end result is this: an interface where we can see at least 2 sub-views in the Viewpager (Orange, blue view)

Note: There is a bug in this practice, that is, you can only swipe the view in the middle, and what if we want to point to the left or right view swipe?

Workaround: Distribute the parent class's touch event to viewpgaer,r.id.ly is the parent container of the Viewpager control

Findviewbyid (r.id.ly). Setontouchlistener (new  View.ontouchlistener () {            @Override              PublicEvent) {                return viewpager.dispatchtouchevent (event);            }        });

In addition, dynamically setting spacing for Viewpager controls in the activity code can also be significantly improved

Viewpager.setpagemargin (8);

Viewpager Scrolling Effect:

Viewpager Toggle Animation (more than 3.0 versions have effect)

：

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>

View Code

Android Development Combat (21): Talking about Android:clipchildren properties