用户界面看起来不太好

Question

我是Android的初学者。我的小应用程序工作正常，但它的UI看起来很丑。你能帮我改好吗？例如：它的图像看起来很大，我们可以使它变小一些。

这是代码片段。

MainActivity.java

package com.example.hacback17.listviewwithimagesadvanced; 

import android.content.Context; 
import android.content.res.Resources; 
import android.support.v7.app.AppCompatActivity; 
import android.os.Bundle; 
import android.view.LayoutInflater; 
import android.view.View; 
import android.view.ViewGroup; 
import android.widget.ArrayAdapter; 
import android.widget.ImageView; 
import android.widget.ListView; 
import android.widget.TextView; 

public class MainActivity extends AppCompatActivity { 

    ListView list; 
    String[] memeTitle; 
    String[] memeDescription; 
    // getting ids of images from drawable 
    int[] images = {R.drawable.number_one,R.drawable.number_two, R.drawable.number_three, R.drawable.number_four, R.drawable.number_five, 
      R.drawable.number_six, R.drawable.number_seven, R.drawable.number_eight, R.drawable.number_nine, R.drawable.number_ten}; 

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



     Resources resources = getResources(); 
     memeTitle = resources.getStringArray(R.array.titles); 
     memeDescription = resources.getStringArray(R.array.titles); 

     // Getting the reference of the ListView 
     list = (ListView) findViewById(R.id.listView); 

     MyAdapter adapter = new MyAdapter(this, memeTitle, images, memeDescription); 
     list.setAdapter(adapter); 
    } 
} 

// Custom ArrayAdapter 
class MyAdapter extends ArrayAdapter<String> 
{ 
    Context context; 
    int[] images; // getting the reference of images. 
    String[] titleArray; // getting the reference of titles array 
    String[] descriptionArray; // getting the reference of description array 

    public MyAdapter(Context context, String[] titles, int[] img, String[] description) { 
     super(context, R.layout.single_row, R.id.textView, titles); 
     this.context = context; 
     this.images = img; 
     this.titleArray = titles; 
     this.descriptionArray = description; 
    } 


    @Override 
    public View getView(int position, View convertView, ViewGroup parent) { 

     // Let's get the reference of LayoutInflater to get the XML into Java code. 
     LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE); 
     View row = inflater.inflate(R.layout.single_row, parent, false); 

     ImageView myImage = (ImageView) row.findViewById(R.id.imageView); 
     TextView myTitle = (TextView) row.findViewById(R.id.textView); 
     TextView myDescription = (TextView) row.findViewById(R.id.textView2); 


     myImage.setImageResource(images[position]); 

     myTitle.setText(titleArray[position]); 

     myDescription.setText(descriptionArray[position]); 



     return row; 
    } 
} 

activity_main.xml中

<?xml version="1.0" encoding="utf-8"?> 
<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:paddingBottom="@dimen/activity_vertical_margin" 
    android:paddingLeft="@dimen/activity_horizontal_margin" 
    android:paddingRight="@dimen/activity_horizontal_margin" 
    android:paddingTop="@dimen/activity_vertical_margin" 
    tools:context="com.example.hacback17.listviewwithimagesadvanced.MainActivity"> 


    <ListView 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:id="@+id/listView" 
     android:layout_alignParentTop="true" 
     android:layout_alignParentStart="true" /> 
</RelativeLayout> 

single_row.xml

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

    <ImageView 
     android:src="@drawable/number_one" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:id="@+id/imageView" 
     android:layout_alignParentTop="true" 
     android:layout_alignParentStart="true" 
     android:layout_margin="10dp" /> 

    <TextView 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:textAppearance="?android:attr/textAppearanceLarge" 
     android:text="Large Text" 
     android:id="@+id/textView" 
     android:layout_alignTop="@+id/imageView" 
     android:layout_alignParentEnd="true" 
     android:layout_toEndOf="@+id/imageView" /> 

    <TextView 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:textAppearance="?android:attr/textAppearanceSmall" 
     android:text="Small Text" 
     android:id="@+id/textView2" 
     android:layout_alignEnd="@+id/textView" 
     android:layout_alignStart="@+id/textView" 
     android:layout_below="@+id/textView" /> 

</RelativeLayout> 

的UI看起来是这样的：

Answer 1

在你ArrayAdapter使用这些funcitons：

myImage.setMaxWidth(MAX_WIDTH); 
myImage.setMaxHeight(MAX_HEIGHT); 

使用在MAX_WIDTH & MAX_HEIGHT自己的值。

Answer 2

让你将图像布局widht和高度wrap_content设置为30dp。

<ImageView 
     android:src="@drawable/number_one" 
     android:layout_width="30dp" 
     android:layout_height="30dp" 
     android:id="@+id/imageView" 
     android:layout_alignParentTop="true" 
     android:layout_alignParentStart="true" 
     android:layout_margin="10dp" />