Android布局:如何实现这种特殊外观?

时间:2014-11-01 14:27:51

标签: android xml android-layout

我在使用Android的布局方面遇到了困难,我觉得它会随机捕捉/调整大小/移动。我正在努力实现这种特殊的布局,但我不知道如何。

How I'd like the layout to look

任何有关实现此布局的帮助/提示都将不胜感激!

这是我尝试过的代码:

public class ImageAdapter extends BaseAdapter {
    private Context mContext;

    // Constructor
    public ImageAdapter(Context c) {
        mContext = c;
    }

    public int getCount() {
        return mThumbIds.length;
    }

    public Object getItem(int position) {
        return null;
    }

    public long getItemId(int position) {
        System.out.println(position);
        return 0;
    }

    // create a new ImageView for each item referenced by the Adapter
    public View getView(int position, View convertView, ViewGroup parent) {
        ImageView imageView;

        int imgSize = 0;

        if (convertView == null) {

            WindowManager wm = (WindowManager) mContext
                    .getSystemService(Context.WINDOW_SERVICE);
            Display display = wm.getDefaultDisplay();
            Point size = new Point();
            display.getSize(size);
            imgSize = size.x / 4;

            imageView = new ImageView(mContext);
            imageView.setLayoutParams(new GridView.LayoutParams(imgSize,
                    imgSize));
            imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);

        } else {
            imageView = (ImageView) convertView;
        }

        imageView.setImageResource(mThumbIds[position]);

        imageView.setLayoutParams(new GridView.LayoutParams(imgSize * 2,
                imgSize * 2));
        imageView.setImageResource(mThumbIds2[0]);

        return imageView;
    }

    // Keep all Images in array
    public Integer[] mThumbIds = { R.drawable.yourpic, R.drawable.yourpic,
            R.drawable.yourpic, R.drawable.yourpic, R.drawable.yourpic,
            R.drawable.yourpic, R.drawable.yourpic, R.drawable.yourpic,
            R.drawable.yourpic, R.drawable.yourpic, R.drawable.yourpic,
            R.drawable.yourpic, R.drawable.yourpic, R.drawable.yourpic,
            R.drawable.yourpic, R.drawable.yourpic, R.drawable.yourpic,
            R.drawable.yourpic, R.drawable.yourpic, R.drawable.yourpic,
            R.drawable.yourpic, R.drawable.yourpic };

    public Integer[] mThumbIds2 = { R.drawable.bigpicture };
}

1 个答案:

答案 0 :(得分:1)

尝试这样的事情 这里很重要:layout_span。你可以在html表中执行类似colspan的操作

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

<TableRow
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_span="2"
        android:src="@drawable/yourbigpic" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/yourpic" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/yourpic" />
</TableRow>

<TableRow
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/yourpic" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/yourpic" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/yourpic" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/yourpic" />
</TableRow>

<TableRow>

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/yourpic" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/yourpic" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/yourpic" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/yourpic" />
</TableRow>