[android] ViewPagerで横スクロールのView切り替え＋iOSのPageControll（ドット）実装

2016年11月27日2016年11月27日 Bluebear-IO 1068 Views 0 Comments ViewPager

ViewPagerで横スクロールのView切り替え＋iOSのPageControll（ドット）実装

横スクロールするスライドをViewPagerで実装し
且つ、iOSのPageControllのようなドット表示機能を実装する

各スライド（写真）のFragmentを作成し、FragmentPagerAdapterでそれぞれのスライドを管理させ、FragmentPagerAdapterをViewPagerに実装させることで実現

photoFragment.java

array.xmlにTitle（titleArray）とDetail（detailArray）の文字列をページ分用意
画像ファイルはdrawableに配置してある画像をそれぞれ使用

public class PhotoFragment extends Fragment {

    public static LoginFragment newInstance(String fileName,int position) {
        LoginFragment frag = new LoginFragment();
        Bundle b = new Bundle();
        b.putString("fileName", fileName);
        b.putInt("position", position);
        frag.setArguments(b);
        return frag;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment, null);

        //packageName取得
        View myView = inflater.inflate(R.layout.fragment, container, false);
        String packageName = myView.getContext().getPackageName();

        //文字列から画像表示
        int imageId = getResources().getIdentifier(getArguments().getString("fileName"), "drawable", packageName);
        ImageView imageView = (ImageView)view.findViewById(R.id.imageView);
        imageView.setImageResource(imageId);

        //テキスト配列取得
        String[] array_strTitle = getResources().getStringArray(R.array.titleArray);
        String[] array_strDetail = getResources().getStringArray(R.array.detailArray);

        int position = getArguments().getInt("position");

        //textviewTitle
        TextView textviewTitle = (TextView)view.findViewById(R.id.fragment_Title);
        textviewTitle.setText(array_strTitle[position]);

        //textvieDetail
        TextView textvieDetail = (TextView)view.findViewById(R.id.fragment_Detail);
        textvieDetail.setText(array_strDetail[position]);

        return view;
    }
}

fragment.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:id="@+id/fragment_linearlayout"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical"
 android:weightSum="1">

 <ImageView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:scaleType="fitCenter"
 android:id="@+id/fragment_bkImage"
 />

 <LinearLayout
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical">

 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:id="@+id/fragment_Detail"
 android:textSize="20sp"
 android:text="Detail"
 android:textAlignment="textStart"
 android:paddingBottom="@dimen/activity_vertical_margin"
 android:paddingLeft="@dimen/activity_horizontal_margin"
 android:paddingRight="@dimen/activity_horizontal_margin"
 android:paddingTop="@dimen/login_detail_top"
 />

 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:id="@+id/fragment_Title"
 android:textSize="40sp"
 android:text="Title"
 android:textAlignment="textEnd"
 android:paddingBottom="@dimen/activity_vertical_margin"
 android:paddingLeft="@dimen/activity_horizontal_margin"
 android:paddingRight="@dimen/activity_horizontal_margin"
 android:paddingTop="@dimen/login_detail_top"
 />

 </LinearLayout>

</RelativeLayout>

PhotoFragmentPagerAdapter.java

*FragmentPagerAdapterはレイアウト不要

public class PhotoFragmentPagerAdapter extends FragmentPagerAdapter {

    public LoginFragmentPagerAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int position) {
        String fileName = "bk0"+ fileNumber; //bk0x.pngという画像をそれぞれ準備
        return PhotoFragment.newInstance(fileName,position); //画像のファイル名とページ番号を引き渡して、インスタンスを作成
    }

    @Override
    public int getCount() {
        return 6; //合計6ページ
    }
}

MainActivity.java

*ドット実装のためにdrawableに「dot_selected.png」と「dot.png」という画像を配置

public class MainActivity extends AppCompatActivity {

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

        setPager();
    }


    private void setPager() {
        FragmentManager manager = getSupportFragmentManager();
        ViewPager viewPager = (ViewPager) findViewById(R.id.viewPager);
        LoginFragmentPagerAdapter adapter = new LoginFragmentPagerAdapter(manager);
        viewPager.setAdapter(adapter);

        //スライドのドット実装
        final ImageView img_page1 = (ImageView)findViewById(R.id.img_page1) ;
        final ImageView img_page2 = (ImageView)findViewById(R.id.img_page2) ;
        final ImageView img_page3 = (ImageView)findViewById(R.id.img_page3) ;
        final ImageView img_page4 = (ImageView)findViewById(R.id.img_page4) ;
        final ImageView img_page5 = (ImageView)findViewById(R.id.img_page5) ;
        final ImageView img_page6 = (ImageView)findViewById(R.id.img_page6) ;

        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageSelected(int position) {

                switch (position) {
                    case 0:
                        img_page1.setImageResource(R.drawable.dot_selected);
                        img_page2.setImageResource(R.drawable.dot);
                        img_page3.setImageResource(R.drawable.dot);
                        img_page4.setImageResource(R.drawable.dot);
                        img_page5.setImageResource(R.drawable.dot);
                        img_page6.setImageResource(R.drawable.dot);
                        break;

                    case 1:
                        img_page1.setImageResource(R.drawable.dot);
                        img_page2.setImageResource(R.drawable.dot_selected);
                        img_page3.setImageResource(R.drawable.dot);
                        img_page4.setImageResource(R.drawable.dot);
                        img_page5.setImageResource(R.drawable.dot);
                        img_page6.setImageResource(R.drawable.dot);
                        break;

                    case 2:
                        img_page1.setImageResource(R.drawable.dot);
                        img_page2.setImageResource(R.drawable.dot);
                        img_page3.setImageResource(R.drawable.dot_selected);
                        img_page4.setImageResource(R.drawable.dot);
                        img_page5.setImageResource(R.drawable.dot);
                        img_page6.setImageResource(R.drawable.dot);
                        break;

                    case 3:
                        img_page1.setImageResource(R.drawable.dot);
                        img_page2.setImageResource(R.drawable.dot);
                        img_page3.setImageResource(R.drawable.dot);
                        img_page4.setImageResource(R.drawable.dot_selected);
                        img_page5.setImageResource(R.drawable.dot);
                        img_page6.setImageResource(R.drawable.dot);
                        break;

                    case 4:
                        img_page1.setImageResource(R.drawable.dot);
                        img_page2.setImageResource(R.drawable.dot);
                        img_page3.setImageResource(R.drawable.dot);
                        img_page4.setImageResource(R.drawable.dot);
                        img_page5.setImageResource(R.drawable.dot_selected);
                        img_page6.setImageResource(R.drawable.dot);
                        break;

                    case 5:
                        img_page1.setImageResource(R.drawable.dot);
                        img_page2.setImageResource(R.drawable.dot);
                        img_page3.setImageResource(R.drawable.dot);
                        img_page4.setImageResource(R.drawable.dot);
                        img_page5.setImageResource(R.drawable.dot);
                        img_page6.setImageResource(R.drawable.dot_selected);
                        break;

                    default:
                        break;
                }


            }

            @Override
            public void onPageScrolled(int arg0, float arg1, int arg2) {

            }

            @Override
            public void onPageScrollStateChanged(int arg0) {

            }
        });
    }
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 xmlns:tools="http://schemas.android.com/tools"
 android:id="@+id/activity_login"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 tools:context="プロジェクト名.MainActivity">

 <android.support.v4.view.ViewPager
 android:id="@+id/viewPager"
 android:layout_width="match_parent"
 android:layout_height="match_parent" />

 <LinearLayout
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:layout_alignBottom="@+id/bottomLiner"
 android:gravity="center"
 android:layout_alignWithParentIfMissing="true"
 android:layout_centerHorizontal="true"
 android:paddingTop="250dp"
 >

 <ImageView
 android:layout_width="@dimen/dots_height"
 android:layout_height="wrap_content"
 android:id="@+id/img_page1"
 android:src="@drawable/dot_selected"
 android:scaleType="fitCenter"
 android:paddingLeft="@dimen/dots_margin"
 android:paddingRight="@dimen/dots_margin"
 />
 <ImageView
 android:layout_width="@dimen/dots_height"
 android:layout_height="wrap_content"
 android:id="@+id/img_page2"
 android:scaleType="fitCenter"
 android:src="@drawable/dot"
 android:paddingLeft="@dimen/dots_margin"
 android:paddingRight="@dimen/dots_margin"
 />
 <ImageView
 android:layout_width="@dimen/dots_height"
 android:layout_height="wrap_content"
 android:id="@+id/img_page3"
 android:scaleType="fitCenter"
 android:src="@drawable/dot"
 android:paddingLeft="@dimen/dots_margin"
 android:paddingRight="@dimen/dots_margin"
 />
 <ImageView
 android:layout_width="@dimen/dots_height"
 android:layout_height="wrap_content"
 android:id="@+id/img_page4"
 android:scaleType="fitCenter"
 android:src="@drawable/dot"
 android:paddingLeft="@dimen/dots_margin"
 android:paddingRight="@dimen/dots_margin"
 />
 <ImageView
 android:layout_width="@dimen/dots_height"
 android:layout_height="wrap_content"
 android:id="@+id/img_page5"
 android:scaleType="fitCenter"
 android:src="@drawable/dot"
 android:paddingLeft="@dimen/dots_margin"
 android:paddingRight="@dimen/dots_margin"
 />
 <ImageView
 android:layout_width="@dimen/dots_height"
 android:layout_height="wrap_content"
 android:id="@+id/img_page6"
 android:scaleType="fitCenter"
 android:src="@drawable/dot"
 android:paddingLeft="@dimen/dots_margin"
 android:paddingRight="@dimen/dots_margin"
 />

 </LinearLayout>

</RelativeLayout>

Bluebear I/O: 技術備忘録

[android] ViewPagerで横スクロールのView切り替え＋iOSのPageControll（ドット）実装

ViewPagerで横スクロールのView切り替え＋iOSのPageControll（ドット）実装

photoFragment.java

fragment.xml

PhotoFragmentPagerAdapter.java

MainActivity.java

activity_main.xml

コメントを残すコメントをキャンセル

ViewPagerで横スクロールのView切り替え＋iOSのPageControll（ドット）実装

photoFragment.java

fragment.xml

PhotoFragmentPagerAdapter.java

MainActivity.java

activity_main.xml

You May Also Like

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル