制作可点击的图像以打开另一个活动

Question

在这里，我练习了一些使用自动调整图像大小制作 gridview 的教程。我在我的活动中采用了这个tutorial。我接下来要做的是如何使图像可点击。这样当用户点击每张图片时，它会转到某个类/活动。

这是我实验的程序中的几个代码：

activity_main.xml 将网格视图放入布局、拉伸模式和列宽：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<GridView
    android:id="@+id/gridview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:verticalSpacing="5dp"
    android:horizontalSpacing="5dp"
    android:stretchMode="columnWidth"
    android:numColumns="2" 
    />
</FrameLayout>

MainActivity.java 保持其纵横比的自定义 ImageView：

public class MainActivity extends ImageView {
public MainActivity(Context context) {
    super(context);
}

public MainActivity(Context context, AttributeSet attrs) {
    super(context, attrs);
}

public MainActivity(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    setMeasuredDimension(getMeasuredWidth(), getMeasuredWidth()); //Snap to width
}
}

这是一个网格项目的布局：

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

<com.example.conversa.MainActivity
    android:id="@+id/picture"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scaleType="centerCrop"
    />
<TextView
    android:id="@+id/text"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingLeft="10dp"
    android:paddingRight="10dp"
    android:paddingTop="15dp"
    android:paddingBottom="15dp"
    android:layout_gravity="bottom"
    android:textColor="@android:color/white"
    android:background="#55000000"
    />

</FrameLayout>

这是 gridview 的适配器：

public class MyAdapter extends BaseAdapter {
private List<Item> items = new ArrayList<Item>();
private LayoutInflater inflater;

public MyAdapter(Context context) {
    inflater = LayoutInflater.from(context);

    items.add(new Item("Conversation 1",       R.drawable.pic1));
    items.add(new Item("Conversation 2",   R.drawable.pic2));
    items.add(new Item("Conversation 3", R.drawable.pic3));
    items.add(new Item("Conversation 4",      R.drawable.pic4));
    items.add(new Item("Conversation 5",     R.drawable.pic5));
    items.add(new Item("Conversation 6",      R.drawable.pic6));
    items.add(new Item("Conversation 7",       R.drawable.pic7));
    items.add(new Item("Conversation 8",     R.drawable.pic8));
    items.add(new Item("Conversation 9",      R.drawable.pic9));
    items.add(new Item("Conversation 10",       R.drawable.pic10));
}

@Override
public int getCount() {
    return items.size();
}

@Override
public Object getItem(int i) {
    return items.get(i);
}

@Override
public long getItemId(int i) {
    return items.get(i).drawableId;
}

@Override
public View getView(int i, View view, ViewGroup viewGroup) {
    View v = view;
    ImageView picture;
    TextView name;

    if(v == null) {
        v = inflater.inflate(R.layout.gridimage, viewGroup, false);
        v.setTag(R.id.picture, v.findViewById(R.id.picture));
        v.setTag(R.id.text, v.findViewById(R.id.text));
    }

    picture = (ImageView)v.getTag(R.id.picture);
    name = (TextView)v.getTag(R.id.text);

    Item item = (Item)getItem(i);

    picture.setImageResource(item.drawableId);
    name.setText(item.name);

    return v;
}

private class Item {
    final String name;
    final int drawableId;

    Item(String name, int drawableId) {
        this.name = name;
        this.drawableId = drawableId;
    }
}
}

这是适配器设置为 gridview 的地方：

public class Gridpiw extends Activity {

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    GridView gridView = (GridView)findViewById(R.id.gridview);
    gridView.setAdapter(new MyAdapter(this));
}

}

我应该添加或修改什么以便可以单击图像以显示新活动？

Answer 1

你应该这样做：

首先，创建你的activity_main.xml：

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

    <GridView
        android:id="@+id/gridview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:verticalSpacing="5dp"
        android:horizontalSpacing="5dp"
        android:stretchMode="columnWidth"
        android:numColumns="2"/>

</FrameLayout>

其次，将您的 Gridpiw 更改为 MainActivity 类名：

public class MainActivity extends Activity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        GridView gridView = (GridView) findViewById(R.id.gridview);
        gridView.setAdapter(new MyAdapter(this));
    }
}

第三，将你的 MainActivity extends ImageView 改为 MeasuredImageView extends ImageView，像这样：

public class MeasuredImageView extends ImageView {
    public MeasuredImageView(Context context) {
       super(context);
    }

    public MeasuredImageView(Context context, AttributeSet attrs) {
       super(context, attrs);
    }

    public MeasuredImageView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
       super.onMeasure(widthMeasureSpec, heightMeasureSpec);
       setMeasuredDimension(getMeasuredWidth(), getMeasuredWidth()); //Snap to width
    }
}

然后，将其包含到您的网格项目布局中：

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

    <com.example.conversa.MeasuredImageView
        android:id="@+id/picture"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clickable="true"
        android:scaleType="centerCrop"
    />
    <TextView
        android:id="@+id/text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:paddingTop="15dp"
        android:paddingBottom="15dp"
        android:layout_gravity="bottom"
        android:textColor="@android:color/white"
        android:background="#55000000"
    />

</FrameLayout>

注意： id 为“picture”的 ImageView 应该具有 android:clickable="true" 属性。

然后你应该在你的适配器中存储上下文，作为参数传递。

public class MyAdapter extends BaseAdapter {
    ...
    private Context context
    ...
    public MyAdapter(Context context) {
        this.context = context;
        //your actions...
    }
}

最后，在适配器类的 getView() 函数中，您应该将 OnClickListener 设置为 ImageView：

...
@Override
public View getView(int i, View view, ViewGroup viewGroup) {
    View v = view;
    ImageView picture;
    TextView name;

    if(v == null) {
        v = inflater.inflate(R.layout.gridimage, viewGroup, false);
        v.setTag(R.id.picture, v.findViewById(R.id.picture));
        v.setTag(R.id.text, v.findViewById(R.id.text));
    }

    picture = (ImageView)v.getTag(R.id.picture);
    name = (TextView)v.getTag(R.id.text);

    Item item = (Item)getItem(i);

    picture.setImageResource(item.drawableId);
    name.setText(item.name);

    picture.setOnClickListener(new View.OnClickListener() {
       @Override
       public void onClick(View v) {
          Intent intent = new Intent(context, SecondActivity.class);
          context.startActivity(intent);
       }
    });

    return v;
}
...

希望这会有所帮助。

Answer 2

在getView()

中的适配器内的代码中添加这种ImageViews代码

添加onClickListener()

 picture.setOnClickListener(new OnClickListener() {
        // Start new list activity
        public void onClick(View v) {
            Intent mainIntent = new Inten(SampleMainActivity.this,SecondActivity.class);
            startActivity(mainIntent);
        }
 }