Android studio implements a simple shopping mall interface
With the development of the Internet, the popularity of electronic products such as mobile phones and the rise of e-commerce, people are more and more inclined to stay at home online shopping. Online shopping has become a trend and has occupied a large part of our daily consumption mode. Almost everything we can see in life can be bought on the shopping platform. So how do these shopping platforms display these product lists? How do we add this information when we browse the product list? With these questions, this project will take you to learn the use of listview.
First, build the layout file of the commodity list. The outermost layer adopts linear layout and the orientation selects vertical. In this way, the controls in the interface are arranged vertically from top to bottom.
Next, place a textview control with width set to math_ Parent, that is, the parent container is filled with the same width as the parent container; The height is set to 45dp, the text content text is "shopping mall", the font size textsize is set to 18sp, the font color textcolor is set to white, the background is set to orange, and the gravity (text position) is displayed as center.
Finally, a listview control is placed, that is, the list. The width fills the screen and the height is adaptive. The preview effect is shown as follows:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="45dp"
android:text="购物商城"
android:textSize="18sp"
android:textColor="#FFFFFF"
android:background="#FF8F03"
android:gravity="center"/>
<ListView
android:id="@+id/lv"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
A listview must have an item, because a list alone is not enough. You must also add content to the list, and item is the content displayed in each line of the list. The two complement each other and form a list together.
To set up the commodity entry interface, you only need to set up the item in the first line. Like other item formats, you only need to define an array in the main file mainactivity, write the commodity content, and then generate it automatically. So let's build the item in the first line first.
Relativelayout is selected for the outermost layout. An ImageView control is placed at the top to display the picture of the product. The width and height are set by yourself. The position is vertically centered.
Invalid Sign
In this sub layout, a textview control is placed to display the product name. The text ID is set to title, and the width and height are set to be adjusted according to the content size. The text content is "table", the text size is 20sp, and the text color is black.
Invalid Sign
Invalid Sign
The interface preview effect is shown in the figure below:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp">
<ImageView
android:id="@+id/iv"
android:layout_width="150dp"
android:layout_height="120dp"
android:layout_centerVertical="true"/>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_toRightOf="@+id/iv"
android:layout_centerVertical="true">
<TextView
android:id="@+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="桌子"
android:textSize="20sp"
android:textColor="#000000"/>
<TextView
android:id="@+id/tv_price"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="价格："
android:textSize="20sp"
android:layout_marginTop="10dp"
android:layout_below="@+id/title"
android:textColor="#FF8F03"/>
<TextView
android:id="@+id/price"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1000"
android:textSize="20sp"
android:layout_below="@+id/title"
android:layout_toRightOf="@+id/tv_price"
android:textColor="#FF8F03"
android:layout_marginTop="10dp"/>
</RelativeLayout>
</RelativeLayout>
After building the list, now define the data adapter in mainactivity to convert the data into the view we can see. Firstly, mybaseadapter is defined, which inherits from baseadapter and contains four methods: (1) getcount method obtains the total number of items and returns the object represented by listview item; (2) Getitem method, the parameter is the subscript of item, and returns the data object of item; (3) Getitemid method, the parameter is the subscript of item, and returns the ID of item; (4) View getview method to obtain the item view corresponding to the corresponding position. Position is the position of the current item, convertview is used to reuse the old view, and parent is used to load the XML layout.
Define a viewholder class and declare three member variables. Then bind the commodity name title, price and amount IV with the corresponding control ID. if convertview is null, find the control and load the view. If it is not empty, the commodity information will be displayed directly. The code of adapter mybaseadapter is as follows:
class MyBaseAdapter extends BaseAdapter{
@Override
public int getCount(){ //得到item的总数
return titles.length; //返回ListView Item条目代表的对象
}
@Override
public Object getItem(int position){
return titles[position]; //返回item的数据对象
}
@Override
public long getItemId(int position){
return position; //返回item的id
}
@Override
public View getView(int position, View convertView, ViewGroup parent){//获取item中的View视图
ViewHolder holder;
if(convertView==null){
convertView=View.inflate(MainActivity.this,R.layout.list_item, null);
holder=new ViewHolder();
holder.title=convertView.findViewById(R.id.title);
holder.price=convertView.findViewById(R.id.price);
holder.iv=convertView.findViewById(R.id.iv);
convertView.setTag(holder);
}else{
holder=(ViewHolder)convertView.getTag();
}
holder.title.setText(titles[position]);
holder.price.setText(prices[position]);
holder.iv.setImageResource(icons[position]);
return convertView;
}
}
The code just is optimized by using the viewholder class and reusing convertview, which not only reduces time-consuming operations, but also prevents the problem of memory overflow caused by too much data, killing two birds with one stone.
class ViewHolder{
TextView title;
TextView price;
ImageView iv;
}
In the mainactivity class, three arrays are defined, namely, the title array, which is used to display the commodity list; Prices array, used to display the amount and unit price; Icons Collection, which is used to display the imported product pictures in drawable. Then use the oncreate method to initialize the control, create and set the adapter, and the code is as follows:
public class MainActivity extends AppCompatActivity {
//需要适配的数据
private String[] titles={"桌子","苹果","蛋糕","线衣","猕猴桃","围巾"};
private String[] prices={"1800元","10元/kg","300元","350元","280元"};
//图片集合
private int[] icons={R.drawable.table,R.drawable.apple,R.drawable.cake,
R.drawable.wearclothes,R.drawable.kiwifruit,R.drawable.scarf};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//初始化ListView控件
ListView listView=findViewById(R.id.lv);
//创建一个Adapter的实例
MyBaseAdapter mAdapter=new MyBaseAdapter();
//设置Adapter
listView.setAdapter(mAdapter);
}
So far, the detailed design of the project has been introduced. (the code word is not easy, and the back is sore)
Open the simulator to run, and the product list interface is shown in the figure, which can be dragged up and down.
This shopping mall project mainly tests students' use of listview and basic controls. I hope you can master them. These knowledge points will be often used in Android projects. Therefore, I hope you can master the use of the above knowledge points to facilitate subsequent development projects.
Students who need source learning can pay attention to my WeChat official account. Shopping mall can get source code, and there are many Android projects waiting for you to learn.