为什么 UI 不能正常显示？答案

【问题标题】：Why UI not displaying properly?为什么 UI 不能正常显示？
【发布时间】：2018-10-28 21:56:58
【问题描述】：

我正在制作一个 android cv 应用程序，但我想实现屏幕截图中显示的 UI。 screenshot of ui I want 低于真实设备的当前 UI current ui

我实现 UI 的 XML 布局，它由一个 ImageView 和一些显示主题的 TextView 组成。我已经实现了所有任务，但 UI 没有显示我想要的显示方式。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorBlust"
    android:orientation="vertical">


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:baselineAligned="false"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/educationImage"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginStart="5dp"
            android:layout_marginLeft="5dp"
            android:src="@drawable/education_information"
            tools:ignore="ContentDescription" />

        <TextView
            android:id="@+id/education_info"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginStart="10dp"
            android:layout_marginLeft="10dp"
            android:text="@string/education_information"
            android:textColor="@color/colorWhite"
            android:textSize="20sp" />

    </LinearLayout>

    <TextView
        android:id="@+id/duration"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginStart="12dp"
        android:layout_marginLeft="12dp"
        android:text="@string/text_duration"
        android:textColor="@color/colorWhite"
        android:textSize="16sp" />

    <TextView
        android:id="@+id/institution"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginStart="12dp"
        android:layout_marginLeft="12dp"
        android:text="@string/text_institution"
        android:textColor="@color/colorWhite"
        android:textSize="16sp" />

    <TextView
        android:id="@+id/degree"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:layout_marginStart="12dp"
        android:layout_marginLeft="12dp"
        android:text="@string/text_degree"
        android:textColor="@color/colorWhite"
        android:textSize="16sp" />


    <Space
        android:layout_width="50dp"
        android:layout_height="50dp" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal">

            <ImageView
                android:id="@+id/subjectImage"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginStart="20dp"
                android:layout_marginLeft="20dp"
                android:src="@drawable/university_subjects"
                tools:ignore="ContentDescription" />

            <TextView
                android:id="@+id/subjects"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginStart="100dp"
                android:layout_marginLeft="100dp"
                android:text="@string/university_subjects"
                android:textColor="@color/colorWhite"
                android:textSize="20sp" />

            <include
                layout="@layout/subject_list"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_below="@+id/subjects"
                android:layout_marginTop="60dp" />
        </RelativeLayout>


    </LinearLayout>

</LinearLayout>

我创建了另一个适配器并在主观上创建了虚拟数据下面的适配器类

      public  class SubjectAdapter extends RecyclerView.Adapter<SubjectAdapter.ViewHolder> {

    private  SubjectActivity subjectActivity;
    private int [] subjectImage;
    String[] subjectText;
    List<FakeData> fakeData;



    public class ViewHolder extends RecyclerView.ViewHolder {
        public TextView subjects;
        public ImageView subjectImage;

        public ViewHolder(View view) {
            super(view);
            subjectImage = (ImageView) view.findViewById(R.id.subjectImage);
            subjects = (TextView) view.findViewById(R.id.subjects);


        }
    }

    public SubjectAdapter(SubjectActivity subjectActivity, int []subjectImage, String [] subjectText, List<FakeData> fakeData){
        this.subjectActivity = subjectActivity;
        this.subjectImage = subjectImage;
        this.subjectText = subjectText;
        this.fakeData = fakeData;

    }
        @Override
        public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
            View itemView = LayoutInflater.from(parent.getContext())
                    .inflate(R.layout.subject_list, parent, false);

            return new ViewHolder(itemView);
        }

       @Override
        public void onBindViewHolder(ViewHolder holder, int position) {
            FakeData fake = fakeData.get(position);
            Picasso.get().load(fake.getImage()).
                    into(holder.subjectImage);
            holder.subjects.setText(fake.getSubjects());
        }


        // TODO Auto-generated constructor stub





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

在我托管 RecyclerView 的主题 XML 下方

<RelativeLayout 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"
 >

<android.support.v7.widget.RecyclerView
    android:id="@+id/list"

    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:layout_alignParentStart="true">
</android.support.v7.widget.RecyclerView>

在我有宿主项目的 subject_list.xml 下方

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorBlust"
    android:orientation="horizontal" >

    <ImageView
        android:id="@+id/icon"
        android:layout_width="60dp"
        android:layout_marginLeft="10dp"
        android:layout_height="60dp"
        android:padding="5dp"
        android:src="@drawable/computer_science"
        android:layout_marginStart="10dp" />

    <LinearLayout android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <TextView
            android:id="@+id/item"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/computers_science"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="5dp"
            android:padding="2dp"
            android:textColor="@color/colorWhite" />

    </LinearLayout>

我创建了虚假数据以托管其他图像和文本

低于 fakeModel 类公共类 FakeData {

public String getImage() {
    return image;
}

public void setImage(String image) {
    this.image = image;
}

public String getSubjects() {
    return subjects;
}

public void setSubjects(String subjects) {
    this.subjects = subjects;
}

String image;
String subjects;

}

在我用 RecyclerView 扩展的适配器类下面公共类 SubjectAdapter 扩展 RecyclerView.Adapter {

private  SubjectActivity subjectActivity;
private int [] subjectImage;
String[] subjectText;
List<FakeData> fakeData;



public class ViewHolder extends RecyclerView.ViewHolder {
    public TextView subjects;
    public ImageView subjectImage;

    public ViewHolder(View view) {
        super(view);
        subjectImage = (ImageView) view.findViewById(R.id.subjectImage);
        subjects = (TextView) view.findViewById(R.id.subjects);


    }
}

public SubjectAdapter(SubjectActivity subjectActivity, int []subjectImage, String [] subjectText, List<FakeData> fakeData){
    this.subjectActivity = subjectActivity;
    this.subjectImage = subjectImage;
    this.subjectText = subjectText;
    this.fakeData = fakeData;

}
    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View itemView = LayoutInflater.from(parent.getContext())
                .inflate(R.layout.subject_list, parent, false);

        return new ViewHolder(itemView);
    }

   @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        FakeData fake = fakeData.get(position);
        Picasso.get().load(fake.getImage()).
                into(holder.subjectImage);
        holder.subjects.setText(fake.getSubjects());
    }


    // TODO Auto-generated constructor stub





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

}

在我实现了假图像和数据的我的主题类下面

公共类 SubjectActivity 扩展 Activity {

List<FakeData> fakeData;
int [] subjectImage = {R.drawable.computer_science,
        R.drawable.data_structure,

       };



ListView list;
String[] subjectText = {
        "Computer Science",
        "Data Structure",

};


@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.subject);


    RecyclerView  recyclerView= (RecyclerView) findViewById(R.id.list);
    SubjectAdapter adapter = new SubjectAdapter(SubjectActivity.this, subjectImage,
            subjectText, fakeData);
    RecyclerView.LayoutManager mLayoutManager = new LinearLayoutManager(getApplicationContext());
    recyclerView.setLayoutManager(mLayoutManager);
    recyclerView.setAdapter(adapter);


}

}

【问题讨论】：

请添加图片而不是链接到它们。

标签： android user-interface

【解决方案1】：

您似乎只使用了 Android Studio 的拖放功能来定位 UI 元素。问题是，Android Studio 在通用设备中显示了这些 UI 元素，它不会匹配所有设备。当我开始使用 Android 时，这份文档帮助我了解了如何放置 UI 中的元素。

https://developer.android.com/studio/write/layout-editor

【讨论】：

【解决方案2】：

您的 XML 格式不正确。您的 LinearLayout 方向错误：

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">

它应该是垂直的。

然后验证其内容。您有多个具有方向属性的 RelativeLayout。

应该改为LinearLayout。相对布局没有方向。

除了这些错误之外，您的布局非常复杂并且层次结构很深。这将导致性能问题。我给你的建议是学习如何使用ConstraintLayout。

学习曲线有点高，但值得！

【讨论】：

Sousa，我已经更新了代码，你检查一下我哪里出错了
给你的相同提示仍然适用。此外，不要使用已弃用的 ListView。请改用 RecyclerView。
苏萨，你能给我一个样品吗
Google 有一个代码实验室。检查它：codelabs.developers.google.com/codelabs/constraint-layout/…
Andre Sousa，我如何创建假数据并在 recyclerview 中显示