Talk about what divider is in Android _android

In Android application development you will often encounter something called divider, which is the split line between two view. Recent work to notice this divider and analysis, unexpectedly found inside the universe, surprised for heaven ...

ListView's Divider

1. Custom Divider Margins

ListView Divider Default is left and right at both ends of the end, how to simply set a margin?

Using inset or layer-list can be implemented simply, with the following code:

<!--method A-->
<?xml version= "1.0" encoding= "Utf-8"?> <inset "the xmlns:android=" http://
Schemas.android.com/apk/res/android "
android:insetleft=" 16DP ">
<shape android:shape=" Rectangle " >
<solid android:color= "#f00"/>
</shape>
</inset>
<!--method two-->
<?xml version= "1.0" encoding= "Utf-8"?> <layer-list xmlns:android=
"http://schemas.android.com/apk/" Res/android ">
<item android:left=" 16DP ">
<shape android:shape=" Rectangle ">
< Solid android:color= "#f00"/>
</shape>
</item>
</layer-list>

which inset in addition to the left margin insetleft, there are Insettop, Insetright, Insetbottom, the effect map:

2. Divider of the last item

Many students may find that the last item of ListView Divider Sometimes, sometimes not.

I draw a picture and everyone can understand it:

The above is the display effect of insufficient data, if the data Mansi, all is to see not much final divider.

The truth is, when the ListView height is not the last divider, so only in match_parent case, ListView height is more than, to draw the last divider.

PS: A lot of information on the Internet, the last item of divider and footerdividersenabled mixed together, this is wrong, two logically independent, similar to a headerdividersenabled, Headerdividersenabled and footerdividersenabled do not affect the final divider drawing by default, and they are dedicated to headers and footer, as noted.

Recyclerview's Divider

Recyclerview's divider is called Itemdecoration,recyclerview.itemdecoration itself an abstract class, and the official does not provide a default implementation.

There is a divideritemdecoration in the official Support7demos example, we can refer directly to the location in the SDK here:

Extras/android/support/samples/support7demos/src/.../.../decorator/divideritemdecoration.java

But this divideritemdecoration has three questions:

Only system default styles are supported, and custom drawable types are not supported divider

Inside the algorithm for no high-width drawable (such as the insetdrawable used above) is not a picture of the horizontal list of divider rendering method Drawhorizontal () Right calculation error, resulting in vertical divider will not draw out, should read: Final int right = left + mdivider.getintrinsicwidth ();;

To address these issues, I fixed and enhanced the following:

Import Android.content.Context;
Import Android.content.res.TypedArray;
Import Android.graphics.Canvas;
Import Android.graphics.Rect;
Import android.graphics.drawable.Drawable;
Import Android.support.v4.view.ViewCompat;
Import Android.support.v7.widget.LinearLayoutManager;
Import Android.support.v7.widget.RecyclerView;
Import Android.view.View; /** * Recyclerview's itemdecoration default implementation * 1. The default is to use the system's split line * 2. Supports custom drawable type * 3. Supports horizontal and vertical direction * 4. Fixed the bug shown by the official vertical divider * Extended from the official Android SDK under the Support7demos divideritemdecoration/public class Divideritemdecoration Extends Recyclerview.itemdecoration {private static final int[] Attrs = new int[]{Android.
R.attr.listdivider};
public static final int horizontal_list = linearlayoutmanager.horizontal;
public static final int vertical_list = linearlayoutmanager.vertical;
Private drawable Mdivider;
private int mwidth;
private int mheight;
private int morientation; Public Divideritemdecoration (context context, int orientation) {final TypedArray a = conText.obtainstyledattributes (ATTRS);
Mdivider = a.getdrawable (0);
A.recycle ();
SetOrientation (orientation); /** * NEW: Support Customization dividerdrawable * * @param context * @param orientation * @param dividerdrawable/Public Divideritemdeco Ration (context context, int orientation, drawable dividerdrawable) {mdivider = dividerdrawable; SetOrientation (
orientation); public void setorientation (int orientation) {If orientation!= horizontal_list && Orientation!= vertical_list
{throw new IllegalArgumentException ("Invalid Orientation");} morientation = orientation; /** * NEW: Support manual for drawable width of no high width * @param width/public void setwidth (int width) {this.mwidth = width;}/** * NEW: Support manual for No high width drawable Set height * @param heights */public void setheight (int height) {this.mheight = height;} @Override public void OnD Raw (Canvas C, recyclerview parent) {if (morientation = = vertical_list) {drawvertical (c, parent);} else {Drawhorizontal
(c, parent); } public void Drawvertical (Canvas C, Recyclerview Parent) {Final int left = Parent.getpaddingleft (), final int right = Parent.getwidth ()-parent.getpaddingright (); final
int childcount = Parent.getchildcount (); for (int i = 0; i < ChildCount. i++) {final View child = Parent.getchildat (i); final recyclerview.layoutparams params
= (recyclerview.layoutparams) child getlayoutparams ();
Final int top = Child.getbottom () + Params.bottommargin + math.round (viewcompat.gettranslationy (child));
final int bottom = top + getdividerheight ();
Mdivider.setbounds (left, top, right, bottom);
Mdivider.draw (c);  } public void Drawhorizontal (Canvas C, Recyclerview parent) {Final int top = Parent.getpaddingtop (); final int bottom =
Parent.getheight ()-Parent.getpaddingbottom ();
Final int childcount = Parent.getchildcount (); for (int i = 0; i < ChildCount. i++) {final View child = Parent.getchildat (i); final recyclerview.layoutparams params
= (recyclerview.layoutparams) child getlayoutparams (); Final int left = Child.getright () + params.rightMargin + math.round (Viewcompat.gettranslationx (child));
Final int right = left + getdividerwidth ();
Mdivider.setbounds (left, top, right, bottom);
Mdivider.draw (c); @Override public void Getitemoffsets (Rect outrect, int itemposition, Recyclerview parent) {if (morientation = = Vertic
Al_list) {outrect.set (0, 0, 0, getdividerheight ());} else {outrect.set (0, 0, getdividerwidth (), 0);}} private int getdividerwidth () {return mwidth > 0? mWidth:mDivider.getIntrinsicWidth ();} private int Getdividerheig HT () {return mheight > 0 mHeight:mDivider.getIntrinsicHeight ();}}

The

uses the following:

The default system divider Divideritemdecoration = new Divideritemdecoration (this, divideritemdecoration.vertical_list); Custom picture drawable Divider divideritemdecoration = new Divideritemdecoration (This, Divideritemdecoration.vertical_
LIST, Getresources (). getdrawable (R.drawable.ic_launcher)); Custom divider-vertical list of drawable without high width divideritemdecoration = new Divideritemdecoration (This,
Divideritemdecoration.vertical_list, New Colordrawable (Color.parsecolor ("#ff00ff"));
Divideritemdecoration.setheight (1); Custom divider-Horizontal list of drawable without high width divideritemdecoration = new Divideritemdecoration (This,
Divideritemdecoration.horizontal_list, New Colordrawable (Color.parsecolor ("#ff00ff"));
Divideritemdecoration.setwidth (1); Custom divider with margin and no high width (insetdrawable as example above)//This place can also specify a width and height in the drawable XML file, and the same effect divideritemdecoration = New Divideritemdecoration (this, divideritemdecoration.horizontal_list, Getresources (). Getdrawable (
R.drawable.list_divider)); Divideritemdecoration.setwidth (displayless. $DP 2px (16) + 1); 

Manual Divider

Sometimes without the native support of the system control, you can only manually add a divider to the two view, for example, to set the divider between each item of the interface, to add a vertical divider between the horizontal and average separated view, and so on.

Regardless of horizontal vertical, are very simple, set a view, setting a background on it, under normal circumstances there is nothing to say.

Let's consider a common setup interface where the split line of the interface has a left margin, such as a micro-letter setup interface, which I believe most people have done with the layout code:

<relativelayout xmlns:android= "http://schemas.android.com/apk/res/android" android:layout_width= "match_parent "Android:layout_height=" Match_parent > <!--This group_container background must be set, and LIST_ITEM_BG list_item_ Normal is the same, otherwise the effect will be incorrect. --> <linearlayout android:id= "@+id/group_container" android:layout_width= "Wrap_content" Android:layout_ height= "Wrap_content" android:layout_alignparenttop= "true" android:layout_margintop= "48DP" android:background= "# FFF "android:orientation=" vertical "> <relativelayout android:id=" @+id/account_container "Android:layout_" Width= "Match_parent" android:layout_height= "wrap_content" android:background= "@drawable/list_item_bg" Android: Clickable= "true" > <textview android:id= "@+id/account_title" android:layout_width= "Wrap_content" Android: layout_height= "Wrap_content" android:layout_alignparentleft= "true" Android:layout_centervertical= "true" Android: Layout_margin= "16DP" android:text= "android:textcolor=" #f00 "android:textsize=" 16SP "/> </RelativeLayout> <view android:layout_width=" match_parent "android:layout_height=" 1px "Android:
layout_marginleft= "16DP" android:background= "#f00"/> <relativelayout android:id= "@+id/phone_container" Android:layout_width= "Match_parent" android:layout_height= "wrap_content" android:background= "@drawable/list_item
_BG "android:clickable=" true "> <textview android:id=" @+id/phone_title "android:layout_width=" Wrap_content "
android:layout_height= "Wrap_content" android:layout_alignparentleft= "true" android:layout_centervertical= "true" Android:layout_margin= "16DP" android:text= "Second Item" android:textcolor= "#f00" android:textsize= "16sp"/> </ Relativelayout> </LinearLayout> </RelativeLayout>

The effect figure is as follows, and we also look at its overdraw state:

By analyzing the level of overdraw, we found that for a small margin, set the entire Groud_container background, resulting in a overdraw.

Can you optimize the overdraw? The answer is yes.

The background is sure to be removed, but this left-side view is not so simple to write, you need to customize a view, it supports the left margin of the vacated 16DP line with the list_item_normal color values, so as to see the left margin.

The specific code for this view is as follows:

Import Android.content.Context;
Import Android.content.res.TypedArray;
Import Android.graphics.Canvas;
Import Android.graphics.Color;
Import Android.graphics.Paint;
Import Android.util.AttributeSet;
Import Android.util.TypedValue;
Import Android.view.View;
Import COM.JAYFENG.LESSCODE.CORE.R; public class Spacedividerview extends View {private int mspaceleft = 0; private int mspacetop = 0; private int Mspacerigh
t = 0;
private int mspacebottom = 0;
private int mspacecolor = color.transparent;
Private Paint Mpaint = new Paint (); Public Spacedividerview {This (context, null);} public Spacedividerview, AttributeSet a Ttrs) {This [context, attrs, 0];} public Spacedividerview (context, AttributeSet attrs, int defstyleattr) {super (
Context, attrs, defstyleattr);
TypedArray a = Context.obtainstyledattributes (Attrs, R.styleable.spacedividerview, defstyleattr, 0); Mspaceleft = A.getdimensionpixelsize (r.styleable.spacedividerview_spaceleft, (int) typedvalUe.applydimension (Typedvalue.complex_unit_dip, 0, Getresources (). Getdisplaymetrics ())); Mspacetop = A.getdimensionpixelsize (r.styleable.spacedividerview_spacetop, (int) typedvalue.applydimension (
Typedvalue.complex_unit_dip, 0, Getresources (). Getdisplaymetrics ())); Mspaceright = A.getdimensionpixelsize (r.styleable.spacedividerview_spaceright, (int) typedvalue.applydimension (
Typedvalue.complex_unit_dip, 0, Getresources (). Getdisplaymetrics ())); Mspacebottom = A.getdimensionpixelsize (R.styleable.spacedividerview_spacebottom, (int) TypedValue.applyDimension (
Typedvalue.complex_unit_dip, 0, Getresources (). Getdisplaymetrics ()));
Mspacecolor = A.getcolor (R.styleable.spacedividerview_spacecolor, color.transparent);
A.recycle ();
Mpaint.setcolor (Mspacecolor); @Override protected void OnDraw (Canvas Canvas) {Super.ondraw (Canvas); if (Mspaceleft > 0) {canvas.drawrect (0, 0, MS
Paceleft, Getmeasuredheight (), mpaint); } if (Mspacetop > 0) {canvas.drawrect (0, 0, getmeasuredwidth (), Mspacetop, MPaint);  } if (Mspaceright > 0) {canvas.drawrect (Getmeasuredwidth ()-mspaceright, 0, Getmeasuredwidth (), Getmeasuredheight (),
Mpaint); } if (Mspacebottom > 0) {canvas.drawrect (0, Getmeasuredheight ()-Mspacebottom, Getmeasuredwidth (), Getmeasuredheight
(), mpaint); }
}
}

With this spacedividerview we rewrite the above layout code:

<relativelayout xmlns:android= "http://schemas.android.com/apk/res/android" android:layout_width= "match_parent
"Android:layout_height=" match_parent "xmlns:app=" Http://schemas.android.com/apk/res-auto "> <linearlayout
Android:id= "@+id/group_container" android:layout_width= "wrap_content" android:layout_height= "Wrap_content" Android:layout_alignparenttop= "true" android:layout_margintop= "48DP" android:orientation= "vertical" > < Relativelayout android:id= "@+id/account_container" android:layout_width= "Match_parent" Wrap_content "android:background=" @drawable/list_item_bg "android:clickable=" true "> <textview android:id=" @+ Id/account_title "android:layout_width=" wrap_content "android:layout_height=" Wrap_content "Android:layout_"
Alignparentleft= "true" android:layout_centervertical= "true" android:layout_margin= "16DP" android:text= "a" Android:textcolor= "#f00" android:textsize= "16sp"/> </RelativeLayout> <com.jayfeng.lesscode.core.other .Spacedividerview android:layout_width= "match_parent" android:layout_height= "1px" android:background= "#f00" app: spaceleft= "16DP" app:spacecolor= "@color/list_item_normal"/> <relativelayout android:id= "@+id/phone_ Container "android:layout_width=" match_parent "android:layout_height=" wrap_content "android:background=" @drawable /LIST_ITEM_BG "android:clickable=" true "> <textview android:id=" @+id/phone_title "android:layout_width=" Wrap_ Content "android:layout_height=" Wrap_content "android:layout_alignparentleft=" true "android:layout_centervertical = "true" android:layout_margin= "16DP" android:text= "Second Item" android:textcolor= "#f00" android:textsize= "16SP"/ > </RelativeLayout> </LinearLayout> </RelativeLayout>

The effect diagram and Overdraw status are as follows:

The Group_container in the interface turns blue from the previous green, indicating a reduction in the overdraw.

In the above case, Spacedividerview decoupled the background color, optimized the overdraw, and the Spacedividerview is also supported in 4 directions, it is particularly convenient to use.

Shadow Divider

The feature of the Shadow dividing line is that it overlaps the view above, and its purpose is to have a stereo effect of the split line.

Using Relativelayout and controlling the top distance can be accomplished by:

<relativelayout xmlns:android= "http://schemas.android.com/apk/res/android"
android:layout_width= "Match_ Parent "
android:layout_height=" match_parent >
<!--layout_margintop value should be the header height excluding the shadow height-->
<linearlayout
android:layout_width= "match_parent"
android:layout_height= "Match_parent"
Android:layout_alignparenttop= "true"
android:layout_margintop= "@dimen/header_height"
android:o rientation= "vertical" >
</LinearLayout>
<!--This is to be put at the end to be displayed at the top, and this header contains a shadow View-->
<include
android:id= "@+id/header"
layout= "@layout/include_header"/>
</ Relativelayout>

Although simple, or a little analysis, header includes content 48dp and Shadow 8DP, then MarginTop is 48DP.

here to introduce you Android set split line divider style for ListView

To set a split line for ListView, simply set the following two properties:

Android:divider= "#000"//Set split line display color
android:dividerheight= "1px"//Here is not 0, otherwise invalid

<listview android:id= "@+id/listview" android:layout_width= fill_parent "android:layout_height=" Fill_  
 Parent "   
 android:divider=" #FFF "  
 android:dividerheight=" "1px"  
 android:layout_margin= "10dip"/>

The above content gives everybody brief introduction Android's divider, hoped that has the help to everybody!