Custom ListView (UITableViewController) for Android development and custom uitableview

Custom ListView (UITableViewController) for Android development and custom uitableview

In the ListView developed by Android, the name-based callback method is the table view. It indicates that the graph is TableView in iOS development. Although the two have different names, their usage, use cases, and functions are very similar. They are all used to display a large amount of data with paging controls. This blog will look at ListView like iOS development. If you are an Android developer, you can see how TableView works in iOS. If you are a beginner, just watch Android development. In fact, there are many things in Android development and iOS development that are the same. Although the name and specific usage of the control are different, the essence of the idea is the same. Today's blog is like iOS development in the right place. Let's take a good look at the Android development of this advanced control ListView.

Now let's get to know the built-in ListView In the Android development system. Then, let's get to know more about ListView and define your own ListView. When you customize your own ListView, you can combine the list of the Wealth Management page in a financial management App. Start the topic of today's blog.

1. built-in ListView

ListView is also the table view. In the table view, cells are placed, and the cells are the data we want to display. In the first part of the blog, we should first use a pre-defined ListView in AndroidSDK. Of course there are other options, but we use the simplest one, that is, there is only one title on the Cell. Let's get started with our first part.

1. Create a ListView

Although ListView is an advanced control, the advanced control is not a control, and the ListView label is also contained in XML. First, create an empty Activity and add the ListView tag to the xml file corresponding to the Activity. Below is the added content.

1     <ListView2         android:id="@+id/list_view"3         android:layout_width="match_parent"4         android:layout_height="match_parent">5     </ListView>

 

2. Create simulated data

The ListView displays a set of data. Therefore, we need to create an Array that stores the data displayed on the ListView. The simulation data is as follows:

1 private String[] dataSource = {"Android", "Google","Java", "Go","iOS", "Apple", "Objc", "Swift"};

 

3. Data Display

The third part is to display the values in the above array on the ListView. Each Cell displays an element. In Android development, to display data in ListView, the concept of data adapter is introduced. This data adapter corresponds to TableViewCell in iOS development. The ArrayAdapter in Android is actually a different Cell template. We assign the data value to the data adapter, and the data adapter will put the data to be displayed on the corresponding Cell and display it on the ListView.

The first line of code below is to get the ListView object from XML by ID. Then create ArrayAdatper (array adapter). The first parameter of the constructor of the adapter is the Activity where the data is located, and the second parameter is the template to be used by the cell, that is, the data to be displayed on the Cell and its layout method (corresponding to the Cell Layout in iOS development). The third parameter is the data source, that is, the data set displayed on the ListView. Finally, the data is displayed for the ListView data adapter.

1 // get the ListView object by ID 2 ListView listView = (ListView) findViewById (R. id. list_view); 3 // create a data adapter 4 ArrayAdapter <String> adapter = new ArrayAdapter <String> (FirstListViewActivit. this, R. layout. support_simple_spinner_dropdown_item, dataSource); 5 // Add data to ListView 6 listView. setAdapter (adapter );

　　　　

After the preceding steps, you can create and display a simple ListView. After running the above Activity, the effect is as follows:

Ii. Custom ListView

If the first step is too simple and not challenging, we will then refer to the second part to customize your own ListView. in development, most of them are custom ListView. Next, let's look at a real case. Below is what we want to achieve, that is, the effect after we write the code and run it. Below is a part of ListView in the "my fortune" module of one of the well-known Internet financial companies. The following figure shows the running effect. When I participate in project development, I am working on the iOS version. Next, let's take a look at how to implement a ListView below in Android development.

1. Analyze the Layout

When getting a uidesign, do not rush to do it. Analyze the UI structure first. The Structure Analysis of a UI is transparent, so it is much easier to implement it. In iOS development, if you want to analyze the UI implementation methods in other apps, you can use a Reveal artifact. As for Android, there are similar powerful UI analysis artifacts, which I cannot tell. Well, we started to analyze the above UI. In fact, the Cell above is repeated. We only need to thoroughly analyze a UI. below is the Cell we extracted:

The following describes the layout commonly used in Android development: basic controls and four layout methods.

2. Implementation of the above Layout

After the layout analysis is complete, the next step is how to implement it. The implementation is to write the XML file. If the above analysis is thorough, writing the layout file should not be considered. Create an XML layout file, implement the preceding layout, and specify the id for the corresponding control. Below is the layout code of the Cell above, as shown below:

1 <? Xml version = "1.0" encoding = "UTF-8"?> 2 <LinearLayout xmlns: android = "http://schemas.android.com/apk/res/android" 3 android: orientation = "vertical" 4 android: layout_width = "match_parent" 5 android: layout_height = "match_parent" 6 android: layout_marginLeft = "@ dimen/activity_horizontal_margin" 7 android: layout_marginRight = "@ dimen/activity_horizontal_margin"> 8 <! -- Similar to Cell Layout in iOS development --> 9 <LinearLayout10 android: orientation = "horizontal" 11 android: gravity = "center_vertical" 12 android: layout_width = "match_parent" 13 android: layout_height = "wrap_content" 14 android: layout_marginTop = "10dp"> 15 <TextView16 android: id = "@ + id/product_name" 17 android: layout_width = "match_parent" 18 android: layout_height = "wrap_content" 19 android: layout_weight = "1" 20 android: gravity = "left" 21 android: textSize = "@ dimen/item_top_title_size" 22 android: text = "@ string/item_top_title" 23 android: lines = "1"/> 24 <TextView25 android: id = "@ + id/product_status" 26 android: layout_width = "match_parent" 27 android: layout_height = "wrap_content" 28 android: layout_weight = "1" 29 android: gravity = "right" 30 android: textSize = "@ dimen/item_top_font_size" 31 android: text = "subscription status" 32 android: lines = "1"/> 33 </LinearLayout> 34 <LinearLayout35 android: orientation = "horizontal" 36 android: gravity = "center_vertical" 37 android: layout_width = "match_parent" 38 android: layout_height = "@ dimen/item_top_height"> 39 <TextView40 android: layout_width = "match_parent" 41 android: layout_height = "wrap_content" 42 android: layout_weight = "1" 43 android: textSize = "@ dimen/item_top_font_size" 44 android: text = "@ string/item_top_left_title" 45 android: lines = "1"/> 46 <TextView47 android: layout_width = "match_parent" 48 android: layout_height = "wrap_content" 49 android: layout_weight = "1" 50 android: lines = "1" 51 android: textSize = "@ dimen/item_top_font_size" 52 android: text = "@ string/item_top_center_title"/> 53 54 <TextView55 android: layout_width = "match_parent" 56 android: layout_height = "wrap_content" 57 android: layout_weight = "1" 58 android: lines = "1" 59 android: textSize = "@ dimen/item_top_font_size" 60 android: text = "@ string/item_top_right_title"/> 61 </LinearLayout> 62 63 <LinearLayout64 android: orientation = "horizontal" 65 android: gravity = "center_vertical" 66 android: layout_width = "match_parent" 67 android: layout_height = "@ dimen/item_top_height" 68 android: layout_marginBottom = "10dp"> 69 <TextView70 android: id = "@ + id/product_lend_money" 71 android: layout_width = "match_parent" 72 android: layout_height = "wrap_content" 73 android: layout_weight = "1" 74 android: textSize = "@ dimen/item_down_font_size" 75 android: text = "0.00" 76 android: lines = "1"/> 77 <TextView78 android: id = "@ + id/product_interest" 79 android: layout_width = "match_parent" 80 android: layout_height = "wrap_content" 81 android: layout_weight = "1" 82 android: lines = "1" 83 android: textSize = "@ dimen/item_down_font_size" 84 android: text = "0.00" 85 android: textColor = "# ff0000"/> 86 87 <TextView88 android: id = "@ + id/product_date" 89 android: layout_width = "match_parent" 90 android: layout_height = "wrap_content" 91 android: layout_weight = "1" 92 android: lines = "1" 93 android: textSize = "@ dimen/item_down_font_size" 94 android: text = "0000-00-00"/> 95 </LinearLayout> 96 97 </LinearLayout>View Code

 

3. the custom Cell Layout is implemented above. Next, we need to define a data entity class for the data displayed on each Cell to represent the data on the Cell, this is also frequently used in development. Next we define our Model class, which is the object class, as shown below:

1 public class ProductModel {2     public String productName = "";3     public String productBuyState = "";4     public String lendMoney = "0.00";5     public String interest = "0.00";6     public String endDate = "0000-00-00";7 }

 

4. Then we will customize the data adapter for the above layout. The adapter we will create will inherit from the ArrayAdapter adapter of the system. We can do something of our own on this basis. One private variable is resourceId. We use it to store the Id of the layout File above, so we can find the layout method corresponding to this adapter. In the custom ProductAdatper, we also override the getView method, which returns the Cell with data.

In the getView method, we can use getItem (position) to obtain the data to be displayed on the Cell and LayoutInflater to obtain the Cell Layout file, next, assign the data value to the corresponding TextView on the Cell. Finally, return the View (Cell in iOS development ). The data adapter of this custom product is now complete. The Code is as follows.

1/** 2 * Created by lizelu on 15/12/20. 3 * the Adapter is similar to the UITableViewCell source file in iOS development. It is the 4 */5 public class ProductAdapter extends ArrayAdapter <ProductModel> {6 private int resourceId assigned to each Cell; 7/** 8 * Constructor 9*10 * @ param context the context of the listView, that is, the layout resource file of the Activity11 * @ param resource Cell in the ListView is 12 * @ param objects Cell, that is, the object class set 13 */14 public ProductAdapter (Context context, int resource, List <ProductModel> objects) {15 super (context, resource, objects); 16 resourceId = resource; 17} 18 19 @ Override20/** 21 * @ param position the number of Cell lines currently set, similar to indexPath in iOS development. row22 */23 public View getView (int position, View convertView, ViewGroup parent) {24 ProductModel product = getItem (position); 25 26 View productView = LayoutInflater. from (getContext ()). inflate (resourceId, null); 27 28 TextView productName = (TextView) productView. findViewById (R. id. product_name); 29 TextView productStatus = (TextView) productView. findViewById (R. id. product_status); 30 TextView productLendMoney = (TextView) productView. findViewById (R. id. product_lend_money); 31 TextView productInterest = (TextView) productView. findViewById (R. id. product_interest); 32 TextView productEndDate = (TextView) productView. findViewById (R. id. product_date); 33 34 productName. setText (product. productName); 35 productStatus. setText (product. productBuyState); 36 productLendMoney. setText (product. lendMoney); 37 productInterest. setText (product. interest); 38 productEndDate. setText (product. endDate); 39 40 return productView; 41} 42}

 

5. After the customization, the simulation data displayed on the ListView is created. The simulation data is an ArrayList, which stores productmodels and each ProductModel corresponds to a Cell. The following functions are used to create analog data:

1 private void createProductList () {2 for (int I = 0; I <20; I ++) {3 ProductModel product = new ProductModel (); 4 product. productName = "product Name" + I; 5 if (I % 2 = 0) {6 product. productBuyState = "in subscription"; 7} else {8 product. productBuyState = "subscription successful"; 9} 10 product. lendMoney = "" + (I * 100 + I); 11 product. interest = "" + (I * 10); 12 if (I <10) {13 product. endDate = "2016-01-0" + I; 14} else {15 product. endDate = "2016-01-" + I; 16} 17 productList. add (I, product); 18} 19}

 

6. This is the last step and the time to zoom in. The next step is to use the data adapter to connect to the ListView and ProductModel data sets. In this case, you can regard the data adapter as the proxy method in TableViewDatasource in iOS development. The image point is that the converter (adapter) is connected to the data source at one end, and the ListView is connected to the displayed data. The adapter function is to convert the data to the elements displayed on TableView, below is the conversion process.

1         ProductAdapter adapter = new ProductAdapter(CustomeItemListViewActivity.this, R.layout.custome_item, productList);2         ListView listView = (ListView)findViewById(R.id.second_list_view);3         listView.setAdapter(adapter);

 

7. if you want to add a click event to each Cell, in other words, you want to do something when you click the Cell, you need to add a click event for each item in the ListView, the code for adding click events for each Cell is as follows. Click Cell to display the product name of the current Cell using Toast.

1         listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {2             @Override3             public void onItemClick(AdapterView<?> parent, View view, int position, long id) {4                 ProductModel product = productList.get(position);5                 Toast.makeText(CustomeItemListViewActivity.this, product.productName, Toast.LENGTH_SHORT).show();6             }7         });

 

At this point, the above Demo is completed. You can also perform many extensions on this basis, such as pull-down refresh, pull-up loading, and other common listView functions. I will not go into details here.

Share the Demo on GitHub: https://github.com/lizelu/AndroidListViewDemo