Android development-basic interface design knowledge, android Interface Design

Android development-basic interface design knowledge, android Interface Design

A good APP not only has beautiful and nice interfaces, but also requires good performance and stability. As a developer, you need to understand the interface design principles and write excellent interface design code.

This chapter describes the use of basic controls, interface layout, and some common interface design attributes.

1. Common Layout

(1) Relative layout of LinearLayout

Android: layout_weight = "1" // percentage attribute
Android: layout_above // indicates that after binding to an element
Android: layout_toLeftOf // indicates that after binding to an element
Android: layout_alignLeft // depends on the left side of an element (parallel alignleft)
Android: layout_margin // indicates the distance from the boundary. A margin with no direction is the distance from the four sides.
Android: padding // padding

Android: orientation = "vertical" // vertically displays the subcontrol list.

Android: orientation = "horizontal" // horizontal display sub-Control List

Control visibility settings:

Set gone to hide (completely absent, no space occupied)

Set to invisvisible (invisible, but still exists, occupying space)

 

(2) RelativeLayout
Android: layout_alignParentRight // relative to the parent control;
Android: layout_toRightOf // relative to the xx Control
Android: alighLeft // the left side of the control is parallel to the left side of a control.

(3) FrameLayout frame Layout

Controls are always superimposed

 

(4) AbsoluteLayout (rarely used)

Android is not recommended because there are many android screens

(5) TableLayout (rarely used)

2. layout skills and Optimization

Two gadgets:

Clever Use of LayoutInflater

LayoutInflater (loading resource file format)

LayoutInflater is an abstract class. LayoutInflater is similar to findViewById (). LayoutInflater is used to find and instantiate xml layout files under res/layout/. findViewById () is to find the specific widget control under the xml layout file.

The following declaration is made in the document: public abstract class LayoutInflater extends Object

LayoutInflater uses the instance code in the project:

LayoutInflater inflater = (LayoutInflater) getSystemService (LAYOUT_INFLATER_SERVICE );

View view = inflater. inflate (R. layout. custom, (ViewGroup) findViewById (R. id. test ));

EditText editText = (EditText) view. findViewById (R. id. content );

For the code above, specify the second parameter ViewGroup root. Of course, you can also set it to null.

View Reuse

View reuse can effectively increase the page loading speed and improve the overall program performance. View reuse example:

1 public View getView (int I, View view, ViewGroup viewGroup) {2 LayoutInflater inflater = (LayoutInflater) mContext. getSystemService (Context. LAYOUT_INFLATER_SERVICE); 3 4 ViewHolder viewHolder; 5 // 1. view reuse: the xml layout file is read only when the view is empty. 6 if (view = null) {7 view = inflater. inflate (R. layout. item_listview, null); 8 viewHolder = new ViewHolder (); 9 viewHolder. avatarImageView = (ImageView) view. findViewById (R. id. avatar_imageview); 10 viewHolder. nameTextView = (TextView) view. findViewById (R. id. item_name); 11 viewHolder. ageTextView = (TextView) view. findViewById (R. id. item_age); 12 13 // tag 14 view. setTag (viewHolder); 15} else {16 viewHo Lder = (ViewHolder) view. getTag (); 17} 18 19 viewHolder. avatarImageView. setImageResource (R. drawable. avatar); 20 viewHolder. nameTextView. setText (mUserInfo. get (I ). getName (); 21 viewHolder. ageTextView. setText (mUserInfo. get (I ). getAge () + ""); 22 23 return view; 24} 25} 26 // 2. Create a class for caching controls. 27 class ViewHolder {28 ImageView avatarImageView; 29 TextView nameTextView; 30 TextView ageTextView; 31}ViewDemo

 

3. Common Data Controls

Commonly used data controls in android include ScrollView, GridView, and ListView. As a data interaction, it is generally used in combination with the adapter.

Adapter is an Adapter interface connecting back-end data and front-end display. It is an important link between data and UI (View. Adapter is required in common View (ListView, GridView) and other places. For example, the relationship among Data, Adapter, and View is intuitively expressed:

Therefore, the page is displayed as follows:

ArrayAdapter is the simplest and can only display one line of words.
SimpleAdapter has the best scalability and Can Customize various effects.
SimpleCursorAdapter can be considered as a simple combination of SimpleAdapter on the database. It can display the database content in the form of a list.

ListView

Common attributes:

Common Methods:

Data Binding:

MPhoneBookListView = (ListView) findViewById (R. id. list_view );
PhoneBookAdapter phoneBookAdapter = new PhoneBookAdapter (ListViewDemoActivity. this );
MPhoneBookListView. setAdapter (phoneBookAdapter );

The adapter is defined as follows:

1 public class PhoneBookAdapter extends BaseAdapter {2 3 <pre> <code> private Context mContext; 4 5 private LayoutInflater mLayoutInflater; 6 7 private String [] mNames = {"James ", "Xiaohua"}; 8 9 public PhoneBookAdapter (Context context) {10 // constructor 11 mContext = context; 12 mLayoutInflater = (LayoutInflater) mContext. getSystemService (Context. LAYOUT_INFLATER_SERVICE); 13} 14 15 @ Override16 public int getCount () {17 // how many pieces of data are there 18 return mNames. length; 19} 20 21 @ Override22 public Object getItem (int position) {23 // return a Data Object 24 return mNames [position]; 25} 26 27 @ Override28 public long getItemId (int position) {29 30 return position; 31} 32 33 @ Override34 public View getView (int position, View convertView, ViewGroup parent) {35 // return a View 36 convertView = mLayoutInflater. inflate (R. layout. item_phone_book_friend, null); 37 // obtain the control 38 TextView nameTextView = (TextView) convertView. findViewById (R. id. name_text_view); 39 // bind 40 nameTextView to the data. setText (mNames [position]); 41 return convertView; // return view 42}PhoneBookAdapter

 

Note:
GetView (int position, View convertView, ViewGroup parent)
Postion indicates location
ConvertView
Parent indicates the owner
ConvertView = mLayoutInflater. inflate (R. layout. item_phone_book_friend, null );
Change the layout to view
TextView nameTextView = (TextView) convertView. findViewById (R. id. name_text_view );
Find TextView in the read view.
The constructor is responsible for passing Context
LayoutInflater is responsible for parsing Layout
Use the getSystemService (Context. LAYOUT_INFLATER_SERVICE) Method

Update Data in ListView:

PhoneBookAdapter. refreshData (mUserInfos );
PhoneBookAdapter. notifyDataSetChanged (); // execute the refresh function

Add the refresh Method to the corresponding Adapter method:

Public void refreshData (UserInfo userInfos ){
MUserInfos = userInfos;
}

GridView

The similarities and differences between GridView and ListView are as follows:

Same:

Differences:

Style (palace format)

The following are some important properties of GridView:

android:numColumns= "3"              // Display 3 columns

android:columnWidth= "50dp"   // The width of each column

android:horizontalSpacing= "110dp"     // Horizontal spacing

android:verticalSpacing= "110dp"      // Vertical spacing

ScrollView

Scrolling the content area that is not a list

Extents from FrameLayout

Supports vertical rolling of HorizontalScrollView