imagebutton

暑い。

画像のボタンを並べたときのバランスを取るのが面倒。
下部分、両サイドの隙間、画像サイズ、できるだけ揃える。

　windows10 のアクセサリーのペイント、ペイント3Dを利用してアイコンを作る。ペイント3Dでグレーの部分を透明に処理をする。

 

・AndroidStudio の左側の枠の「Resource Manager」タブをクリック。
・マネージャーが開いたら「＋」をクリック　＞「Import Drawables」をクリック。
・ファイルが表示されるので、登録ファイルを選択する。
・画像が表示される。左側プルダウンメニューから「Density」選択。右側プルダウンメニューはサイズ？
・「Next」＞「Import」で登録される。

 

【xml】

       
            style="@style/Widget.AppCompat.ImageButton"
            android:layout_width="48dp"
            android:layout_height="64dp"
            android:background="#00FFFFFF"
            android:contentDescription="@string/image_button1"
            android:scaleType="fitCenter"
            android:src="@drawable/s1d_p1" />

 

android:src="@drawable/s1d_p1"

drawable フォルダの s1d_p1 ファイルを指定。

 

　デザインは真似をしつつ、特徴を付けるのが難しいところ。フリー素材で用意ができれば、出所を明記して使わせてもらうのが楽だ。

 

fragment を開く。

　フラグメントを開いてアイコンを並べる。フリー素材に適当なものがないので自前で用意する。デザインは真似ているのにプログラム以上に時間がかかる。

　とりあえず、開く部分と閉じる部分。

【mainActivity.java】

    private boolean doubleTapFlag = false;
    private boolean fragmentFlag = false;

    class MyGestureListener extends GestureDetector.SimpleOnGestureListener {

        @Override
        public boolean onSingleTapConfirmed(MotionEvent e) {

            if (!doubleTapFlag && !fragmentFlag ) {
                if ( nextTargetIndexNo( e ) ) {
                    setNextImage();
                    mViewSwitcher.showNext();
                } else {
                    setNextImage();
                    mViewSwitcher.showPrevious();
                }
            }
            doubleTapFlag = false;

            // 付け焼き刃、フラグメントが閉じたら、シングルタップの処理をさせる
            List<Fragment> list = getSupportFragmentManager().getFragments();
            if ( list.isEmpty() ) {
                fragmentFlag = false;
            }

            return false;
        }

        @Override
        public boolean onDoubleTap(MotionEvent e) {
            doubleTapFlag = true;
            fragmentFlag = true;

            FragmentManager fm = getSupportFragmentManager();
            FragmentTransaction ft = fm.beginTransaction();
            ft.replace( R.id.insert_layout ,new FirstFragment() ); // フラグメントをセット
            ft.addToBackStack("first");
            ft.commit(); // 実行

            return true;
        }
    }

 

【FirstFragment.java】

省略

    public void finish() {
        FragmentManager fm = getFragmentManager();
        assert fm != null;
        FragmentTransaction ft = fm.beginTransaction();
        ft.remove(FirstFragment.this).commit();
    }

任意の場所のクリックに finish(); をセットする。

 

 

　意外と並べたときにバランスが悪い。また、透過部分を作る時、Windows10のペイントは使いづらい。

 

 

fragment は部品

　fragment はウィンドウの代わりになるんじゃないかと誤解が続いていた。フラグメントはウィンドウの装飾品であり、ウィンドウ全体を覆い隠してウィンドウの振りをしても下にある部品の存在は消せない。タップ処理では下にある部品の影響を受ける。

　今は、Activity に画像を表示してタップ処理をしている。フラグメントを全体に広げてリストを何列も表示したとする。リストをスライド、タップをすると下の画像にもタップ処理が加わり変化が起こってしまう。Activity でディスパッチや GestureDetector を利用しているためではないか。onTouch() の戻り値に true を返していても下の画像で処理が行われる。scrollView は作動してない。

　別の方法で下の画像への処理を止められないかを考えた。フラグメントへ移動時に画像を setVisibility(View.GONE) で存在を亡き者にすれば、処理しないのでは？フラグメントから戻ってきたら、setVisibility(View.VISIBLE) で復活させる。ん？フラグメントへの移動は分かるが帰ってくるタイミングは分からない。フラグメントで作業していても下の画像でも作業が行われている。（フラグメントの xml で android:alpha="0.5" を設定すると半透明になり、下の画像の動作が確認できる）

　フラグメントに View を渡して戻る時に view.setVisibility(View.VISIBLE) ？・・結構面倒くさい。フラグメントは決まったものが２つ、排他的で複数表示しない、１つが表示か、全部消えている。全部消えているときに画像操作するとか、か。何かしらフラグメントが表示しているときは下の画像操作できなくするのが良いのか・・。

　で、フラグメント関連メソッド等を調査したら見つけた。
List<Fragment> list = getSupportFragmentManager().getFragments();
FragmentTransaction で加えられたフラグメントをリストアップするメソッド。リスト形態なので、list.isEmpty() が使える。下の画像で操作して欲しくないタップ処理は、list.isEmpty() の状態で判別。小さいプログラム、拡張も考えていない、ので、簡単だし、結果は十分だ。

　とりあえず、何でもやってみる。

記録５：NestedScrollView デベロッパーで推奨

　縦スクロールと横スクロールを入れ子にして、斜めのスクロールを実現するためのクラス。

 

【MyScrollView.java】

public class MyScrollView extends NestedScrollView {

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

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

    public MyScrollView(Context context){
        super(context);
    }

    @Override
    public void requestDisallowInterceptTouchEvent(boolean disallowIntercept){

    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent event){
        onTouchEvent(event);
        return false;
    }

}

 

【xml】
＜?xml version="1.0" encoding="utf-8"?>
＜com.packagename.testviewer3.MyScrollView
    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" >

    ＜HorizontalScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        ＜LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:orientation="horizontal"
            tools:ignore="ObsoleteLayoutParam">

            ＜ImageView
                android:id="@+id/image_view1"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                tools:ignore="ContentDescription" />

        ＜/LinearLayout>
    ＜/HorizontalScrollView>
＜/com.packagename.testviewer3.MyScrollView>

 

フルスクロール参考

Android: 画面サイズよりも大きいViewを縦/横/斜めでスクロールする

 

　装飾を省いた画像表示の基礎部分を記録。

 

記録４：ViewSwitcher で画像を切り替え。

　単純に画像切り替えなら、ImageSwitcher だけど、画像の大きいものをスクロールさせる機能を付けるなら ViewSwitcher だろう。レイアウトの xml ファイルを２つ用意し、それぞれに ScrollView を記述。ImageView にファイル名リストから次の画像を読み出しセットして、ViewSwitcher で切り替える。切り替え時のアニメーションの種類が有るようなのでそのうち試す。

 

public class MainActivity extends AppCompatActivity {

    private ImageView imageView1, imageView2;

    private ViewSwitcher mViewSwitcher;
    private MyScrollView mMSV1, mMSV2;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);

        mMSV1 = (MyScrollView) getLayoutInflater().inflate(R.layout.image1, null); // image1.xml を設定
        mMSV2 = (MyScrollView) getLayoutInflater().inflate(R.layout.image2, null); // image2.xml を設定

        mViewSwitcher = (ViewSwitcher) findViewById(R.id.viewSwitcher);

        mViewSwitcher.addView(mMSV1, 0);
        mViewSwitcher.addView(mMSV2, 1);

        mViewSwitcher.setInAnimation(AnimationUtils.loadAnimation(this, android.R.anim.fade_in));
        mViewSwitcher.setOutAnimation(AnimationUtils.loadAnimation(this, android.R.anim.fade_out));

        imageView1 = findViewById(R.id.image_view1); // image1.xml のid.image_view1
        imageView2 = findViewById(R.id.image_view2); // image2.xml のid.image_view2

    }

    @Override
    protected void onResume() {
        super.onResume();
        setImage( imageView1, fullPathName[ index ] ); // フルパス画像ファイル名から imageView へ画像をセット
        setImage( imageView2, fullPathName[ index ] ); // 実際は配列と標的Noを使ってクラスメソッドを呼び引数を渡す
   }

////// タッチイベントで次の画像をセットして、ViewSwitcherでビューを切り替える。
     if ( 画面右側をタップ ) {
        setNextImage();
        mViewSwitcher.showNext(); // 次を表示
     } else {
        setNextImage();
        mViewSwitcher.showPrevious(); // 戻って表示
     }
///////

    private void setNextImage() {
        if (mViewSwitcher.getNextView() == mMSV1) { // 次の切り替えビューを確認
            setImage( imageView1, fullPathName[ ++index ] ); // ViewSwitcher.addView(view, 0); に登録したもの
        } else {
            setImage( imageView2, fullPathName[ --index ] ); // ViewSwitcher.addView(view, 1); に登録したもの
        }
    }

    private void setImage(ImageView iView, String fullPathName) {

       // 受け取ったフルパスのファイル名から画像データを読み取り、iView へ設定する。
       // 基礎部分

    }

＊注意：setImage( imageView1, fullPathName[ ++index ] );　の "++index" は概念であり、実際は配列参照の範囲内かチェックする。

 

【activity_main.xml】

＜?xml version="1.0" encoding="utf-8"?>
＜android.support.design.widget.CoordinatorLayout
    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/main_activity"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="?attr/fullscreenBackgroundColor"
    android:theme="@style/ThemeOverlay.TestViewer3.FullscreenContainer"

    android:configChanges="orientation|screenSize"
    tools:context=".MainActivity">

    ＜LinearLayout
        android:id="@+id/L_Layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >

        ＜ViewSwitcher
            android:id="@+id/viewSwitcher"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

    ＜/LinearLayout>

＜/android.support.design.widget.CoordinatorLayout>

 

 

【image1.xml】

＜?xml version="1.0" encoding="utf-8"?>
＜com.packagename.testviewer3.MyScrollView
    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" >

    ＜HorizontalScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        ＜LinearLayout
            android:id="@+id/L_Layout1"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:orientation="horizontal"
            tools:ignore="ObsoleteLayoutParam">

            ＜ImageView
                android:id="@+id/image_view1"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                tools:ignore="ContentDescription" />

        ＜/LinearLayout>
    ＜/HorizontalScrollView>
＜/com.packagename.testviewer3.MyScrollView>

 

 

【image2.xml】

＜?xml version="1.0" encoding="utf-8"?>
＜com.packagename.testviewer3.MyScrollView
    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" >

    ＜HorizontalScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        ＜LinearLayout
            android:id="@+id/L_Layout2"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:orientation="horizontal"
            tools:ignore="ObsoleteLayoutParam">

            ＜ImageView
                android:id="@+id/image_view2"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                tools:ignore="ContentDescription" />

        ＜/LinearLayout>
    ＜/HorizontalScrollView>
＜/com.packagename.testviewer3.MyScrollView>

 

続く。