Reprint please indicate this article from Jflex blog http://blog.csdn.net/jflex/article/details/46476599, please respect others ' hard work results, thank you!
Native to Android UI-(1), Introduction to Android UI and common properties and phenomena
Introduction: Android UI Primer, for many people is relatively simple, tutorials are a lot of, but this is definitely not the same as the other. From the touch of Android development is doomed UI development is a research topic, simple native UI use may have you mastered, may also find some components have some discomfort, but as long as you understand why, it is OK. Really feel the use of uncomfortable, then let their UI development ability to become stronger, and then write a good point. Android UI development requires learning to use the native UI before learning to use the open source UI and finally the custom UI. In this order will continue to improve the ability of Android UI development, must be gradual.
One or one get up and look at Android UI1, XML, and code to draw the UI separately
UI example of XML (must understand XML knowledge)
示例:res/layout/activity_main.xml
<linearlayout xmlns: Android = "http://schemas.android.com/apk/res/android" android:layout_width = "match_parent" android:layout_height = "match_parent" android:orientation =; <TextViewandroid:layout_width="Wrap_content"android:layout_height= "Wrap_content" Android:layout_marginbottom="10DP"android:text="This is a TextView" /> </linearlayout>
1、layout的组成:跟标签可以是任意组件,但是只有继承ViewGroup的组件才能包含子控件
2、命名空间:android自带的命名空间,当然自定义组件的时候,需要自定义命名空间
3、android的组件属性:基本上都是按照英文单词定义的,所以大部分都是很好理解,只需要多多练习就会记住
Code UI example (must be familiar with the Java language)
示例:com/snicesoft/testlayout/MainActivity.java
Public class mainactivity extends Activity{ @Override protected void onCreate(Bundle savedinstancestate) {Super. OnCreate (Savedinstancestate);//setcontentview (r.layout.activity_main);LinearLayout layout =NewLinearLayout ( This); Setcontentview (layout); TextView TextView =NewTextView ( This); Textview.settext ("I am a TextView of code creation"); Layout.addview (TextView); }}
Here is a simple example. Of course, the layout of the XML implementation can be implemented in Java code, but despite this, it is recommended to use XML to control the layout so that flexibility is better and the UI can be detached.
You may have overlooked a problem where the IDE, such as Eclipse, Android Studio, provides visual interface development, and why it is not mentioned. Here, the visual operation is often not enough to meet the more detailed UI production, can only easily generate the outline code of the control, if you need to make a fine UI, then it is not difficult to write XML manually, of course, the code hints are very convenient.
2, how to color the UI and resource adaptation
- The use of
color for
-
Color basically needs to be stored in res\values\colors.xml
or res\color\
Colors.xml
<?xml Version= "1.0" encoding= "Utf-8", <resources <color name = "Menu_txt_default" ; #333333 </color ; <color Span class= "Hljs-attribute" >name = "menu_txt_checked" ; #48D1CC Span class= "Hljs-tag" ></color ; </resources ;
- Use of drawable
- Drawable
You only need to copy the picture to the Res/drawable-xxxx directory
Using @drawable/xxx in XML
Using R.drawable.xxx in Java
- Drawable Fit: drawable-xxx
ldpi:240x320
mdpi:320x480
hdpi:480x800, 480x854
XHDPI: At least 960*720
xxhdpi:1280x720
注意:图片仅支持png和jpg
- International processing (multi-lingual)
The international treatment is mainly embodied in res, the solution
Values folder: values-National language
Like what:
American English Environment: Values-en-rus
The Chinese environment is: Values-zh
Mainland Chinese Environment: VALUES-ZH-CN
For more details please check the locale for this class
Same configuration for picture resources and other resources
2, the resolution has a big small, how to do
Resolution adaptation is an essential skill for Android development.
The general approach is: a layout that defines the size of the dimens to handle different resolutions by using values in different resolutions.
1. Common layout
LinearLayout: Linear layout, vertical and horizontal settings, using more
Relativelayout: Relative layout, using more
Framelayout: Layer layout, multi-layer view overlay processing.
Tablelayout: Table layout, just like table in HTML
2. Multi-use Dimens
3. Best specification for UI development
- Layout try to complete the requirements with minimal control and avoid duplication
- Complex layout, multi-use
<inflate>
- ID naming specification: component abbreviation + business name, below is a partial component abbreviation
- Layoutview:lv
- Relativeview:rv
- Textview:tv
- Imageview:iv
- Imagebutton:im
- Button:btn
- Use style, learn to extract the same style in layout
- .9 Production of graphs
- Eliminate the use of PX
- The values in Strings.xml, Dimens.xml, colors.xml are used more in layout
Second, the Common component property manual
1. General Properties
android命名空间常用属性
-Width: layout_width
Value: Wrap_parent (dynamically calculated based on content), Match_parent (full parent layout), and specific DP
Platform |
Android |
IOS |
HTML |
|
Layout_width |
Width |
Width |
-Height: layout_height
Values: Wrap_parent, Match_parent, and specific DP
Platform |
Android |
IOS |
HTML |
|
Layout_height |
Height |
Height |
-Layout_gravity
Platform |
Android |
IOS |
HTML |
|
Layout_gravity |
No |
No |
-Gravity
Platform |
Android |
IOS |
HTML |
|
Gravity |
No |
No |
-Distance between controls: padding
Platform |
Android |
IOS |
HTML |
|
Padding |
No |
Padding |
-Paddingleft
Platform |
Android |
IOS |
HTML |
|
Paddingleft |
No |
Padding |
-Paddingtop
Platform |
Android |
IOS |
HTML |
|
Paddingtop |
No |
Padding |
-Paddingright
Platform |
Android |
IOS |
HTML |
|
Paddingright |
No |
Padding |
-Paddingbottom
Platform |
Android |
IOS |
HTML |
|
Paddingright |
No |
Padding |
-Distance between parent controls: margin
Platform |
Android |
IOS |
HTML |
|
Margin |
No |
Margin |
-MarginLeft
Platform |
Android |
IOS |
HTML |
|
MarginLeft |
No |
Margin |
-MarginTop
Platform |
Android |
IOS |
HTML |
|
MarginTop |
No |
Margin |
-Marginrigth
Platform |
Android |
IOS |
HTML |
|
Marginrigth |
No |
Margin |
-MarginBottom
Platform |
Android |
IOS |
HTML |
|
MarginBottom |
No |
Margin |
2, LinearLayout
- Direction: Orientation
Value: Vertical or Horizontal
Platform |
Android |
IOS |
HTML |
|
Orientation |
No |
No |
3, Relativelayout
Relativelayout The Primary property configuration is actually configured in its child controls, which are commonly used properties
- Align series
Layout_alignparentleft: Value TRUE or false relative to the left side of the parent control
Layout_alignparenttop: Relative to the top of the parent control, evaluates to TRUE or False
Layout_alignparentright: Relative to the right of the parent control, value TRUE or False
Layout_alignparentbotton: Relative to the bottom of the parent control, evaluates to TRUE or False
Layout_alignleft: Relative to which control is left, the value ID
Layout_aligntop: Relative to which control is at the top, the value ID
Layout_alignright: Relative to the right of the control, the value ID
Layout_alignbottom: Relative to the bottom of the control, the value ID
- Center Series
Layout_centerhorizontal: Center Horizontally, value TRUE or False
Layout_centervertical: Center vertically, value TRUE or False
Layout_centerinparent: Horizontal and vertical centering, equivalent to two above is true, value true or False
Iii. Custom Component Properties using 1, custom components
- Composite controls: Combining out-of-the-box controls with groups to synthesize new components, the simplest way is to implement them through inflate layout
- Custom property controls: To improve the configuration of custom components, you can see the desired effects in layout in real time by defining attributes.
2. Packaging of custom components
- Components written in pure Java: directly packaged jars
- The component contains layout layouts: Lib mode or (jar+res)
Iv. common phenomena of native components 1, adapter GetView repeated calls
For example, ListView: When the height of the ListView is set to Wrap_parent, GetView is repeated; setting match_parent is normal
2. Nesting between ScrollView, ListView, and GridView
嵌套常会出现ListView或者GridView的高度只显示一行,需要重写onMeasure方法
3, ListView, GridView and other sliding view of the Overscrollmode
The default overscroll is a color animation, which itself is a bounce effect similar to iOS, but it hides it in order to avoid the patented bounce effect of iOS.
V. Last
This blog post will be updated irregularly, because time and thinking is not comprehensive, when considering the will be added, I hope you have more suggestions.
Native to Android UI-(1), Introduction to Android UI and common properties and phenomena