Android Custom Combo Controls--picture plus text, like a list of video playback software
Last Update:2017-05-05
Source: Internet
Author: User
<span id="Label3"></p><p><p><strong>Four steps to Write:</strong><br>1, the XML of the combined control;<br>2, Customize the properties of the composite control;<br>3, custom inherits the class class of the composition layout, implements the constructor with two parameters;<br>4, display the combined control in Xml.<br><strong>Specific Implementation process:</strong><br>first, the XML of the combined control<br>There are two ways in which I touch, one is the normal activity xml, and the other is the parent node is the merge Xml. I use the first type in my project, but the individual feels the second good, because the first one has more relative or absolute layout layers.<br>I wrote custom_pictext.xml.</p></p><pre class="prettyprint"><code class=" hljs xml"><span class="hljs-pi"><span class="hljs-pi"><?xml version= "1.0" encoding= "utf-8"?></span></span><span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">relativelayout</span> <span class="hljs-attribute">xmlns:android</span>=<span class="hljs-value">"http://schemas.android.com/apk/res/android"</span> <span class="hljs-attribute">android:layout_width</span>=<span class="hljs-value">"wrap_content"</span><span class="hljs-attribute">android:layout_height</span>=<span class="hljs-value">"wrap_content"</span> > </span></span> <span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">ImageView</span><span class="hljs-attribute">android:id</span>=<span class="hljs-value">"@+id/custom_pic_iv"</span><span class="hljs-attribute">android:layout_width</span> =<span class="hljs-value">"wrap_content"</span><span class="hljs-attribute">android:layout_height</span>=<span class="hljs-value">"wrap_content"</span><span class="hljs-attribute">android:background </span>=<span class="hljs-value">"@mipmap</span> /a"/> </span></span> <span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">textview </span> <span class="hljs-attribute">android:id </span> =<span class="hljs-value"> "@+id/custom_date_tv" </span> <span class="hljs-attribute">android:layout_width </span> =<span class="hljs-value"> "wrap_content" </span> <span class="hljs-attribute">android:layout_height </span> =<span class="hljs-value"> "wrap_content" </span> <span class="hljs-attribute">android:layout_alignbottom< /span>=<span class="hljs-value"> "@id/custom_pic_iv" </span> <span class="hljs-attribute">android:layout_ MarginBottom </span> =<span class="hljs-value"> "5dp" </span> <span class="hljs-attribute">android:layout_ MarginLeft </span> =<span class="hljs-value"> "8dp" </span> <span class="hljs-attribute">android:text </span> =<span class="hljs-value" "^" < span>/> </span></span></span></span> <span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">TextView</span><span class="hljs-attribute">android:id</span>= "<span class="hljs-value">@+id/custom_text_tv"</span><span class="hljs-attribute">android:layout_width</span>=<span class="hljs-value">" Wrap_content "</span><span class="hljs-attribute">android:layout_height</span>=<span class="hljs-value">" Wrap_content "</span><span class="hljs-attribute">android:layout_below</span>=<span class="hljs-value">" @id /custom_pic_iv "</span><span class="hljs-attribute">android:layout_marginleft</span>=<span class="hljs-value">" 4DP "</span><span class="hljs-attribute">android:layout_margintop</span>= <span class="hljs-value">"4dp"</span> <span class="hljs-attribute">android:text</span>=<span class="hljs-value">"title"</span> /> </span></span><span class="hljs-tag"><span class="hljs-tag"></<span class="hljs-title">relativelayout</span>></span></span></code></pre><p><p>Here is an example of the merge, there is time, you can feel the Next.</p></p><pre class="prettyprint"><code class=" hljs xml"><span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">merge</span> <span class="hljs-attribute">xmlns:android</span>=<span class="hljs-value">"http://schemas.android.com/apk/res/android"</span>></span></span> <span class="hljs-tag"><<span class="hljs-title"><span class="hljs-title">Button</span></span> <span class="hljs-attribute"><span class="hljs-attribute">Android:id</span></span>=<span class="hljs-value"><span class="hljs-value">"@+id/title_bar_left"</span></span> <span class="hljs-attribute"><span class="hljs-attribute">Android:layout_width</span></span>=<span class="hljs-value"><span class="hljs-value">"wrap_content"</span></span> <span class="hljs-attribute"><span class="hljs-attribute">Android:layout_height</span></span>=<span class="hljs-value"><span class="hljs-value">"wrap_content"</span></span> <span class="hljs-attribute"><span class="hljs-attribute">Android:layout_alignparentleft</span></span>=<span class="hljs-value"><span class="hljs-value">"true"</span></span> <span class="hljs-attribute"><span class="hljs-attribute">android:layout_centervertical</span></span>=<span class="hljs-value"><span class="hljs-value">"true"</span></span> <span class="hljs-attribute"><span class="hljs-attribute">Android:layout_marginleft</span></span>=<span class="hljs-value"><span class="hljs-value">"5dp"</span></span> <span class="hljs-attribute"><span class="hljs-attribute">Android:background</span></span>=<span class="hljs-value"><span class="hljs-value">"@null"</span></span> <span class="hljs-attribute"><span class="hljs-attribute">Android:minheight</span></span>=<span class="hljs-value"><span class="hljs-value">"45dp"</span></span> <span class="hljs-attribute"><span class="hljs-attribute">Android:minwidth</span></span>=<span class="hljs-value"><span class="hljs-value">"45dp"</span></span> <span class="hljs-attribute"><span class="hljs-attribute">android:textsize</span></span>=<span class="hljs-value"><span class="hljs-value">"14sp"</span></span>/></span> <span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">TextView</span><span class="hljs-attribute">android:id</span>=<span class="hljs-value">"@+id/title_bar_title"</span><span class="hljs-attribute">android:layout_width</span>= <span class="hljs-value"> "wrap_content"</span><span class="hljs-attribute">android:layout_height</span>=<span class="hljs-value">"wrap_content"</span><span class="hljs-attribute">android:layout_centerinparent </span>=<span class="hljs-value">"true"</span><span class="hljs-attribute">android:singleline</span>=<span class="hljs-value">"true"</span><span class="hljs-attribute">android:textsize</span>=<span class="hljs-value">"17sp" </span>/> </span></span> <span class="hljs-tag"><<span class="hljs-title"><span class="hljs-title">Button</span></span> <span class="hljs-attribute"><span class="hljs-attribute">Android:id</span></span>=<span class="hljs-value"><span class="hljs-value">"@+id/title_bar_right"</span></span> <span class="hljs-attribute"><span class="hljs-attribute">Android:layout_width</span></span>=<span class="hljs-value"><span class="hljs-value">"wrap_content"</span></span> <span class="hljs-attribute"><span class="hljs-attribute">Android:layout_height</span></span>=<span class="hljs-value"><span class="hljs-value">"wrap_content"</span></span> <span class="hljs-attribute"><span class="hljs-attribute">Android:layout_alignparentright</span></span>=<span class="hljs-value"><span class="hljs-value">"true"</span></span> <span class="hljs-attribute"><span class="hljs-attribute">android:layout_centervertical</span></span>=<span class="hljs-value"><span class="hljs-value">"true"</span></span> <span class="hljs-attribute"><span class="hljs-attribute">Android:layout_marginright</span></span>=<span class="hljs-value"><span class="hljs-value">"7dp"</span></span> <span class="hljs-attribute"><span class="hljs-attribute">Android:background</span></span>=<span class="hljs-value"><span class="hljs-value">"@null"</span></span> <span class="hljs-attribute"><span class="hljs-attribute">Android:minheight</span></span>=<span class="hljs-value"><span class="hljs-value">"45dp"</span></span> <span class="hljs-attribute"><span class="hljs-attribute">Android:minwidth</span></span>=<span class="hljs-value"><span class="hljs-value">"45dp"</span></span> <span class="hljs-attribute"><span class="hljs-attribute">android:textsize</span></span>=<span class="hljs-value"><span class="hljs-value">"14sp"</span></span>/></span><span class="hljs-tag"><span class="hljs-tag"></<span class="hljs-title">Merge</span>></span></span></code></pre><p><p>These two XML are written in Layout.<br>Ii. customizing the properties of a composite control<br>This step is one of the important parts of our customization, and the private features of the custom components are all shown here.<br>First create the Attrs.xml in values<br>Then define the properties, as in the following code</p></p><pre class="prettyprint"><code class=" hljs xml"><span class="hljs-pi"><span class="hljs-pi"><?xml version= "1.0" encoding= "UTF-8"?></span></span><span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">resources</span>></span></span> <span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">declare-styleable</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"custompictext"</span>></span></span> <span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">attr</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"pic_backgroud"</span> <span class="hljs-attribute">format</span>=<span class="hljs-value">"reference"</span>/></span></span> <span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">attr</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"pic_backgroud_width"</span> <span class="hljs-attribute">format</span>=<span class="hljs-value">"dimension"</span>/> </span></span> <span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">attr</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"pic_backgroud_height"</span> <span class="hljs-attribute">format</span>=<span class="hljs-value">"dimension" </span>/></span></span> <span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">attr</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"pic_text"</span> <span class="hljs-attribute">format</span>=<span class="hljs-value">"string"</span>/></span></span> <span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">attr</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"pic_text_color"</span> <span class="hljs-attribute">format</span>=<span class="hljs-value">"color"</span>/></span></span> <span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">attr</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"pic_text_size"</span> <span class="hljs-attribute">format</span>=<span class="hljs-value">"integer"</span>/> </span></span> <span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">attr</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"pic_date"</span> <span class="hljs-attribute">format</span>=<span class="hljs-value">"string"</span>/></span></span> <span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">attr</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"pic_date_color"</span> <span class="hljs-attribute">format</span>=<span class="hljs-value">"color"</span>/></span></span> <span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">attr</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"pic_date_size"</span> <span class="hljs-attribute">format</span>=<span class="hljs-value">"integer"</span>/> </span></span> <span class="hljs-tag"><span class="hljs-tag"></<span class="hljs-title">declare-styleable</span>></span></span><span class="hljs-tag"><span class="hljs-tag"></<span class="hljs-title">Resources</span>></span></span></code></pre><p><p>Here are a few things to note, first: the property is named name, and the Second: the attribute is Fromat. This unit contains values that can be viewed Here.<br>C. Custom Inherit the class class of the composition layout, implement the constructor with two parameters<br>I realized the Custompictext.java</p></p><pre class="prettyprint"><code class=" hljs avrasm"><span class="hljs-comment"><span class="hljs-comment">/** * Created by Hman on 2017/5/4. * To test custom combo controls</span> */</span>public class Custompictext extends Relativelayout {private ImageView custompiciv<span class="hljs-comment"><span class="hljs-comment">;</span></span>Private TextView Customdatetv<span class="hljs-comment"><span class="hljs-comment">;</span></span>Private TextView Customtexttv<span class="hljs-comment"><span class="hljs-comment">;</span></span>Public Custompictext (context context, attributeset attrs) {super (context, attrs)<span class="hljs-comment"><span class="hljs-comment">;</span></span>Load layout view view = Layoutinflater<span class="hljs-preprocessor"><span class="hljs-preprocessor">.</span> from</span>(context)<span class="hljs-preprocessor"><span class="hljs-preprocessor">. Inflate</span></span>(R<span class="hljs-preprocessor"><span class="hljs-preprocessor">. Layout</span></span><span class="hljs-preprocessor"><span class="hljs-preprocessor">. Custom</span></span>_pictext,this)<span class="hljs-comment"><span class="hljs-comment">;</span></span>CUSTOMPICIV = (ImageView) View<span class="hljs-preprocessor"><span class="hljs-preprocessor">. Findviewbyid</span></span>(R<span class="hljs-preprocessor"><span class="hljs-preprocessor">. ID</span></span><span class="hljs-preprocessor"><span class="hljs-preprocessor">. Custom</span></span>_pic_iv)<span class="hljs-comment"><span class="hljs-comment">;</span></span>Customdatetv = (TextView) View<span class="hljs-preprocessor"><span class="hljs-preprocessor">. Findviewbyid</span></span>(R<span class="hljs-preprocessor"><span class="hljs-preprocessor">. ID</span></span><span class="hljs-preprocessor"><span class="hljs-preprocessor">. Custom</span></span>_date_tv)<span class="hljs-comment"><span class="hljs-comment">;</span></span>Customtexttv = (TextView) View<span class="hljs-preprocessor"><span class="hljs-preprocessor">. Findviewbyid</span></span>(R<span class="hljs-preprocessor"><span class="hljs-preprocessor">. ID</span></span><span class="hljs-preprocessor"><span class="hljs-preprocessor">. Custom</span></span>_text_tv)<span class="hljs-comment"><span class="hljs-comment">;</span></span>Load custom property Configuration TypedArray TypedArray = Context<span class="hljs-preprocessor"><span class="hljs-preprocessor">. Obtainstyledattributes</span></span>(attrs,r<span class="hljs-preprocessor"><span class="hljs-preprocessor">. Styleable</span></span><span class="hljs-preprocessor"><span class="hljs-preprocessor">. Custompictext</span></span>)<span class="hljs-comment"><span class="hljs-comment">;</span></span>Add attributes for custom attributes if (typedArray! = null) {//add attribute int picbackgroud = TypedArray for picture<span class="hljs-preprocessor"><span class="hljs-preprocessor">. Getresourceid</span></span>(R<span class="hljs-preprocessor"><span class="hljs-preprocessor">. Styleable</span></span><span class="hljs-preprocessor"><span class="hljs-preprocessor">. Custompictext</span></span>_pic_backgroud,<span class="hljs-number"><span class="hljs-number">0</span></span>)<span class="hljs-comment"><span class="hljs-comment">;</span></span>float Picwidth = TypedArray<span class="hljs-preprocessor"><span class="hljs-preprocessor">. Getdimension</span></span>(R<span class="hljs-preprocessor"><span class="hljs-preprocessor">. Styleable</span></span><span class="hljs-preprocessor"><span class="hljs-preprocessor">. Custompictext</span></span>_pic_backgroud_width,<span class="hljs-number"><span class="hljs-number"></span> -</span>)<span class="hljs-comment"><span class="hljs-comment">;</span></span>float Picheight = TypedArray<span class="hljs-preprocessor"><span class="hljs-preprocessor">. Getdimension</span></span>(R<span class="hljs-preprocessor"><span class="hljs-preprocessor">. Styleable</span></span><span class="hljs-preprocessor"><span class="hljs-preprocessor">. Custompictext</span></span>_pic_backgroud_height,<span class="hljs-number"><span class="hljs-number"></span> -</span>)<span class="hljs-comment"><span class="hljs-comment">;</span></span>Custompiciv<span class="hljs-preprocessor"><span class="hljs-preprocessor">. Setbackgroundresource</span></span>(picbackgroud)<span class="hljs-comment"><span class="hljs-comment">;</span></span>Custompiciv<span class="hljs-preprocessor"><span class="hljs-preprocessor">. Setminimumwidth</span></span>(picwidth)<span class="hljs-comment"><span class="hljs-comment">;</span></span>Set properties for caption String Pictext = TypedArray<span class="hljs-preprocessor"><span class="hljs-preprocessor">. getString</span></span>(R<span class="hljs-preprocessor"><span class="hljs-preprocessor">. Styleable</span></span><span class="hljs-preprocessor"><span class="hljs-preprocessor">. Custompictext</span></span>_pic_text)<span class="hljs-comment"><span class="hljs-comment">;</span></span>int pictextcolor = TypedArray<span class="hljs-preprocessor"><span class="hljs-preprocessor">. GetColor</span></span>(R<span class="hljs-preprocessor"><span class="hljs-preprocessor">. Styleable</span></span><span class="hljs-preprocessor"><span class="hljs-preprocessor">. Custompictext</span></span>_pic_text_color,<span class="hljs-number"><span class="hljs-number"></span> -</span>)<span class="hljs-comment"><span class="hljs-comment">;</span></span>int pictextsize = TypedArray<span class="hljs-preprocessor"><span class="hljs-preprocessor">. Getresourceid</span></span>(R<span class="hljs-preprocessor"><span class="hljs-preprocessor">. Styleable</span></span><span class="hljs-preprocessor"><span class="hljs-preprocessor">. Custompictext</span></span>_pic_date_size,<span class="hljs-number"><span class="hljs-number"></span> -</span>)<span class="hljs-comment"><span class="hljs-comment">;</span></span>Customtexttv<span class="hljs-preprocessor"><span class="hljs-preprocessor">. SetText</span></span>(pictext)<span class="hljs-comment"><span class="hljs-comment">;</span></span>Customtexttv<span class="hljs-preprocessor"><span class="hljs-preprocessor">. SetTextColor</span></span>(pictextcolor)<span class="hljs-comment"><span class="hljs-comment">;</span></span>Customtexttv<span class="hljs-preprocessor"><span class="hljs-preprocessor">. Settextsize</span></span>(pictextsize)<span class="hljs-comment"><span class="hljs-comment">;</span></span>Set a property for a date String picdate = TypedArray<span class="hljs-preprocessor"><span class="hljs-preprocessor">. getString</span></span>(R<span class="hljs-preprocessor"><span class="hljs-preprocessor">. Styleable</span></span><span class="hljs-preprocessor"><span class="hljs-preprocessor">. Custompictext</span></span>_pic_date)<span class="hljs-comment"><span class="hljs-comment">;</span></span>int picdatecolor = TypedArray<span class="hljs-preprocessor"><span class="hljs-preprocessor">. GetColor</span></span>(R<span class="hljs-preprocessor"><span class="hljs-preprocessor">. Styleable</span></span><span class="hljs-preprocessor"><span class="hljs-preprocessor">. Custompictext</span></span>_pic_date_color,<span class="hljs-number"><span class="hljs-number">0</span></span>)<span class="hljs-comment"><span class="hljs-comment">;</span></span>int picdatesize = TypedArray<span class="hljs-preprocessor"><span class="hljs-preprocessor">. Getresourceid</span></span>(R<span class="hljs-preprocessor"><span class="hljs-preprocessor">. Styleable</span></span><span class="hljs-preprocessor"><span class="hljs-preprocessor">. Custompictext</span></span>_pic_date_size,<span class="hljs-number"><span class="hljs-number"></span> a</span>)<span class="hljs-comment"><span class="hljs-comment">;</span></span>Customdatetv<span class="hljs-preprocessor"><span class="hljs-preprocessor">. SetText</span></span>(picdate)<span class="hljs-comment"><span class="hljs-comment">;</span></span>Customdatetv<span class="hljs-preprocessor"><span class="hljs-preprocessor">. SetTextColor</span></span>(picdatecolor)<span class="hljs-comment"><span class="hljs-comment">;</span></span>Customdatetv<span class="hljs-preprocessor"><span class="hljs-preprocessor">. Settextsize</span></span>(picdatesize)<span class="hljs-comment"><span class="hljs-comment">;</span></span>TypedArray<span class="hljs-preprocessor"><span class="hljs-preprocessor">. Recycle</span></span>()<span class="hljs-comment"><span class="hljs-comment">;</span></span>} }}</code></pre><p><p>In this case, we can also add some listeners to the control, and everyone adds it themselves; it is worth noting that a class that loads the configuration Typearray<br>4, displaying the combined control in XML<br>This is going to be a random write in an xml.<br>The code is as follows</p></p><pre class="prettyprint"><code class=" hljs xml"><span class="hljs-pi"><span class="hljs-pi"><?xml version= "1.0" encoding= "utf-8"?></span></span><span class="hljs-tag"><span class="hljs-tag"><<span class="hljs-title">linearlayout</span> <span class="hljs-attribute">xmlns:android</span>=<span class="hljs-value">"http://schemas.android.com/apk/res/android"</span> <span class="hljs-attribute"> Xmlns:tools</span>=<span class="hljs-value">"http://schemas.android.com/tools"</span><span class="hljs-attribute">xmlns:hman</span>=<span class="hljs-value">"http// Schemas.android.com/apk/res-auto "</span><span class="hljs-attribute">android:layout_width</span>=<span class="hljs-value">" Wrap_content "</span><span class="hljs-attribute">android: Layout_height</span>=<span class="hljs-value">"wrap_content"</span>> </span></span> <span class="hljs-tag"><<span class="hljs-title"><span class="hljs-title">Com.eastsun.widget.CustomPicText</span></span> <span class="hljs-attribute"><span class="hljs-attribute">Android:id</span></span>=<span class="hljs-value"><span class="hljs-value">"@+id/first"</span></span> <span class="hljs-attribute"><span class="hljs-attribute">Android:layout_width</span></span>=<span class="hljs-value"><span class="hljs-value">"wrap_content"</span></span> <span class="hljs-attribute"><span class="hljs-attribute">Android:layout_height</span></span>=<span class="hljs-value"><span class="hljs-value">"wrap_content"</span></span> <span class="hljs-attribute"><span class="hljs-attribute">Hman:pic_backgroud</span></span>=<span class="hljs-value"><span class="hljs-value">"@mipmap/b"</span></span> <span class="hljs-attribute"><span class="hljs-attribute">hman:pic_date</span></span>=<span class="hljs-value"><span class="hljs-value">"2017/5/6"</span></span> <span class="hljs-attribute"><span class="hljs-attribute">Hman:pic_date_color</span></span>=<span class="hljs-value"><span class="hljs-value">"@color/white"</span></span> <span class="hljs-attribute"><span class="hljs-attribute">Hman:pic_text</span></span>=<span class="hljs-value"><span class="hljs-value">"first picture"</span></span> <span class="hljs-attribute"><span class="hljs-attribute">Hman:pic_text_color</span></span>=<span class="hljs-value"><span class="hljs-value">"@color/red"</span></span> <span class="hljs-attribute"><span class="hljs-attribute">hman:pic_text_size</span></span>=<span class="hljs-value"><span class="hljs-value">"</span> "</span>></span><span class="hljs-tag"><span class="hljs-tag"></<span class="hljs-title">com.eastsun.widget.CustomPicText</span>></span></span><span class="hljs-tag"><span class="hljs-tag"></<span class="hljs-title">linearlayout</span>></span></span></code></pre><p><p>Here's one thing to remember, add xmlns:hman= "http://schemas.android.com/apk/res-auto"<br><strong>Summary</strong><br>The program basically ends Here.<br>Look at the effect<br></p></p> <p><p>Android Custom Combo Controls--picture plus text, like a list of video playback software</p></p></span>
