以前作成したシンプルお絵かきを、ViewPagerを使用して複数画面にお絵かきが出来るように改変してみました。
お試し実装したイメージはこんな感じです。
今回は何回かに分けて記事にしていきたいと思いますので、良ければ参考頂ければと思います。
では、実際にサンプルコードを記述していきます。
CustViewPager.java public class CustViewPager extends ViewPager { public CustViewPager(@NonNull Context context) { super(context); } public CustViewPager(@NonNull Context context, @Nullable AttributeSet attrs) { super(context, attrs); } }
CustPagerAdapter.java public class CustPagerAdapter extends PagerAdapter { private Context mContext; private ArrayList<Integer> mList; public CustPagerAdapter(Context context) { mContext = context; mList = new ArrayList<Integer>(); } public void add(Integer item) { mList.add(item); } @Override public Object instantiateItem(ViewGroup container, int position) { Integer item = mList.get(position); TextView textView = new TextView(mContext); container.addView(textView); return textView; } @Override public void destroyItem(ViewGroup container, int position, Object object) { container.removeView((View) object); } @Override public int getCount() { return mList.size(); } @Override public boolean isViewFromObject(View view, Object object) { return view == (View) object; } }
MainActivity.java public class MainActivity extends AppCompatActivity { CustViewPager mViewPager; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); CustPagerAdapter adapter = new CustPagerAdapter(this); adapter.add(Color.WHITE); adapter.add(Color.WHITE); mViewPager = (CustViewPager) findViewById(R.id.view_pager); mViewPager.setAdapter(adapter); } }
ViewPagerrを拡張したクラスと、PageAdapterを拡張したクラスを作成します。
Activity(MainActivity)でPageAdapterクラスを生成し、addします。
※今回2ページ用意するので、2回addしています。
最後にadapterをViewPagerクラスにセットすることで骨組みはOKです。
activity_main.xml <?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout 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" tools:context=".MainActivity"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent"> <hogehoge.CustViewPager android:id="@+id/view_pager" android:layout_width="match_parent" android:layout_height="match_parent"/> </LinearLayout> </androidx.constraintlayout.widget.ConstraintLayout>
レイアウトの指定は上記のように、拡張したViewPagerを指定します。
ここまででフリックで画面切替が出来る状態になりました。
あとは好みでレイアウトを横向きにするなどしてみるとよいと思います。
次回は、今回作成したViewに対して描画を行っていきます。