SDCard から複数の画像を選択して、 WhatsApp Sending Multiple imagesのようにViewPager & Gridlayoutにロードできる画面を作成しようとしています(以下のスクリーン ショットのように)。
ViewPager と GridLayout (下の画像選択ビュー用) を使用して、スクリーン ショットのように実現できます。ユーザーがViewPagerをスワイプすると、GridLayoutのセレクターを変更する必要があります。この Selectoion Change パーツも、Relative Layout を GridLayout の Child として使用し、RelativeLayout の Background を更新することで実装されます。以下はこれらのxmlです
gridlayout_item.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/layoutContainer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/on_select"
android:padding="2dp" >
<ImageView
android:id="@+id/imageone"
android:layout_width="65dip"
android:layout_height="65dip"
android:layout_gravity="center_vertical"
android:background="@drawable/on_select"
android:padding="1dip"
android:scaleType="center" />
</RelativeLayout>
activity_multi_selection.xml
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@+id/imagepreviewouterlayout" >
<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</android.support.v4.view.ViewPager>
</RelativeLayout>
<RelativeLayout
android:id="@+id/imagepreviewouterlayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="@+id/bottom_layout"
android:layout_marginBottom="10dip"
android:layout_marginTop="10dip"
android:background="@android:color/transparent"
android:padding="5dp" >
<GridLayout
android:id="@+id/imagepreviewlayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:columnCount="5"
android:horizontalSpacing="10dip"
android:orientation="horizontal"
android:rowCount="1"
android:stretchMode="columnWidth"
android:verticalSpacing="10dip" >
<RelativeLayout
android:id="@+id/layoutContainer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/on_select"
android:padding="2dp" >
<ImageView
android:id="@+id/imageone"
android:layout_width="65dip"
android:layout_height="65dip"
android:layout_gravity="center_vertical"
android:background="@drawable/on_select"
android:padding="1dip"
android:scaleType="center" />
</RelativeLayout>
<RelativeLayout
android:id="@+id/add"
android:layout_width="65dip"
android:layout_height="65dip"
android:background="@drawable/extrabtn_style"
android:layout_gravity="center" >
<Button
android:id="@+id/button1"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:background="@drawable/addaccountimg" />
<RelativeLayout
android:id="@+id/addmoreimageBtn"
android:layout_width="406dp"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:clickable="true" >
</RelativeLayout>
</RelativeLayout>
</GridLayout>
</RelativeLayout>
<RelativeLayout
android:id="@+id/bottom_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="@drawable/tabbar1" >
<LinearLayout
android:id="@+id/bottom_layout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="1dp"
android:weightSum="1" >
<Button
android:id="@+id/cancelBtn"
android:layout_width="178dip"
android:layout_height="50dp"
android:layout_weight="0.5"
android:background="@drawable/imageselector_btn"
android:text="Cancel"
android:textColor="#E9E9E9" />
<Button
android:id="@+id/sendImageBtn"
android:layout_width="178dip"
android:layout_height="50dp"
android:layout_marginLeft="0.5dp"
android:layout_weight="0.5"
android:background="@drawable/imageselector_btn"
android:text="Send"
android:textColor="#E9E9E9" />
</LinearLayout>
</RelativeLayout>
</RelativeLayout>
on_select.xml (選択ドローアブル)
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/box" android:state_selected="true"></item>
<item android:drawable="@drawable/box" android:state_checked="true"></item>
<item android:drawable="@drawable/box" android:state_focused="true"></item>
</selector>
しかし、ViewPager の PageChange(onPageSelected)で relativeLayout の Background を変更しているときに、パフォーマンスの問題に直面しています。ViewPager ページがしばらく打たれて動いているということです。
ViewPager の PageChange(onPageSelected) で gridlayout 項目の背景を更新するとコメントすると、スムーズに移動します。以下はコードスニペットです。
@Override
public void onPageSelected(final int arg0) {
if (griditemView!= null)
griditemView.setSelected(false);
griditemView = imagepreviewgridlayout.getChildAt(arg0);
if(griditemView!=null)
{
griditemView.setSelected(true);
}
}
この問題を解決するのを手伝ってください。