安卓应用UI设计

最新推荐文章于 2025-03-31 01:00:00 发布

xiaoyi_168

最新推荐文章于 2025-03-31 01:00:00 发布

阅读量261

点赞数

CC 4.0 BY-SA版权

分类专栏：安卓开发文章标签： ui android

本文链接：https://blog.youkuaiyun.com/xiaoyi_168/article/details/129553695

安卓开发专栏收录该内容

2 篇文章

订阅专栏

掌握UI设计中的layout布局（约束布局）与基本控件（button、text、imageview等）；

掌握复杂控件与adapter的使用（请使用RecycleView进行设计）。在主界面中的某个tab页里添加列表项。

实验结果：（实验小结与结果截图）

功能说明与核心代码

添加RecyclerView控键：

 <?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".fragment_2">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerview2"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</FrameLayout>

新建一个item.xml为RecyclerView设定xml样式

<?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="wrap_content"
    android:orientation="horizontal">

    <!--左侧的图片布局盒子-->
    <LinearLayout
        android:id="@+id/ll_1"
        android:layout_width="wrap_content"
        android:layout_height="125dp"
        android:gravity="center">

        <ImageView
            android:id="@+id/item_goods_img"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_margin="10dp"
            android:background="#DFDFDF"
            android:src="@drawable/phone" />
    </LinearLayout>

    <!--右侧文字盒子布局-->
    <LinearLayout
        android:id="@+id/ll_2"
        android:layout_width="match_parent"
        android:layout_height="125dp"
        android:orientation="vertical">
        <!--名字TextView所在盒子布局-->
        <LinearLayout
            android:id="@+id/ll_2_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:layout_marginBottom="10dp">

            <TextView
                android:id="@+id/item_goods_name"
                android:layout_width="170dp"
                android:layout_height="25dp"
                android:text="小米10pro"
                android:textColor="#000000"
                android:textSize="15sp" />
        </LinearLayout>

        <!--价格TextView所在盒子布局-->
        <LinearLayout
            android:id="@+id/ll_2_price"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp">

            <TextView
                android:id="@+id/item_goods_price"
                android:layout_width="170dp"
                android:layout_height="25dp"
                android:text="骁龙865处理器"
                android:textColor="#000000"
                android:textSize="15sp" />
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

左边为产品图片，右边为产品名称和产品参数

创建Myadapter类，创建的目的主要是在使用RecycleView时，必须指定一个适配器Adapter和一个布局管理器LayoutManager。Adapter就是数据与界面之间的桥梁，它把数据与前端连接到一起。

package com.hubu;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

import java.util.ArrayList;

public class Myadapter extends RecyclerView.Adapter <Myadapter.MyViewHolder> {
    private ArrayList<String> mydata;
    private Context mycontext;

    public Myadapter(ArrayList<String> data, Context context){
        mydata=data;
        mycontext=context;

    }

    @NonNull
    @Override
    public MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view= LayoutInflater.from(mycontext).inflate(R.layout.item,parent,false);

        MyViewHolder holder=new MyViewHolder(view);
        return holder;
    }

    @Override
    public void onBindViewHolder(@NonNull MyViewHolder holder, int position) {

        holder.textView.setText(mydata.get(position));
        holder.imageView.setImageResource(R.drawable.phone);

    }

    @Override
    public int getItemCount() {
        return mydata.size();
    }

    public class MyViewHolder extends RecyclerView.ViewHolder{
        private TextView textView;
        private ImageView imageView;
        public MyViewHolder(@NonNull View itemView) {
            super(itemView);
            textView=itemView.findViewById(R.id.item_goods_name);
            imageView=itemView.findViewById(R.id.item_goods_img);
        }
    }
}

fragment_2中的相关布局：

package com.hubu;

import android.content.Context;
import android.os.Bundle;

import androidx.fragment.app.Fragment;
import androidx.recyclerview.widget.GridLayoutManager;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

import java.util.ArrayList;

/**
 * A simple {@link Fragment} subclass.
 * Use the {@link fragment_2#newInstance} factory method to
 * create an instance of this fragment.
 */
public class fragment_2 extends Fragment {

    // TODO: Rename parameter arguments, choose names that match
    // the fragment initialization parameters, e.g. ARG_ITEM_NUMBER
    private static final String ARG_PARAM1 = "param1";
    private static final String ARG_PARAM2 = "param2";

    // TODO: Rename and change types of parameters
    private String mParam1;
    private String mParam2;

    public fragment_2() {
        // Required empty public constructor
    }

    /**
     * Use this factory method to create a new instance of
     * this fragment using the provided parameters.
     *
     * @param param1 Parameter 1.
     * @param param2 Parameter 2.
     * @return A new instance of fragment fragment_2.
     */
    // TODO: Rename and change types and number of parameters
    public static fragment_2 newInstance(String param1, String param2) {
        fragment_2 fragment = new fragment_2();
        Bundle args = new Bundle();
        args.putString(ARG_PARAM1, param1);
        args.putString(ARG_PARAM2, param2);
        fragment.setArguments(args);
        return fragment;
    }

    RecyclerView recyclerView;
    Myadapter myadapter;
    ImageView imageView;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        if (getArguments() != null) {
            mParam1 = getArguments().getString(ARG_PARAM1);
            mParam2 = getArguments().getString(ARG_PARAM2);
        }
    }


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        View view;
        view=inflater.inflate(R.layout.fragment_2, container, false);
        recyclerView=view.findViewById(R.id.recyclerview2);
        imageView=view.findViewById(R.id.item_goods_img);

        ArrayList<String> data = new ArrayList<String>();
        for (int i=0;i<10;i++){
            data.add("小米10pro");
        }

        Context context=getContext();
        myadapter=new Myadapter(data,context);

        LinearLayoutManager manager=new LinearLayoutManager(context);
        manager.setOrientation(recyclerView.VERTICAL);
        recyclerView.setLayoutManager(manager);
        recyclerView.setAdapter(myadapter);

        recyclerView.setLayoutManager(new GridLayoutManager(context,2));

        return view;
    }

}

结果截图

如图在fragment_2上面实现列表项的网格布局。

实验小结

本次实验进一步对安卓的UI设计方法思路进行学习。主要目标是实现了主界面中的某个tab页里添加列表项。在实验过程中重点了解了RecycleView和Adapter在UI控制中起到的作用。RecycleView是一个高级的UI控件，可以显示列表或网格布局的数据。Adapter是一个类，用于连接RecycleView和数据源，负责创建和绑定每个Item的视图。同时在搜索资料时也了解了RecycleView和ListView的区别：

RecycleView支持多种布局效果，如列表、网格、瀑布流等，而ListView只支持纵向列表。

RecycleView规范了ViewHolder的编写，不需要像ListView那样自己定义和调用setTag()和getTag()。

RecycleView提供了更丰富的动画效果，如渐变、增删移动等，而ListView则较为简单。

RecycleView需要设置LayoutManager来管理布局，而ListView则不需要。

通过对这些知识的学习，对后续的安卓开发有很大的帮助。

源代码