UI看起来不太好看

时间:2016-07-08 04:56:00

标签: android user-interface

我是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>

用户界面如下所示:Please have a look at it

2 个答案:

答案 0 :(得分:0)

使你的图像布局widht和height 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" />

答案 1 :(得分:0)

ArrayAdapter 中使用以下功能:

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

在MAX_WIDTH&amp;中使用您自己的值。 MAX_HEIGHT。

相关问题