Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

トップ > カラーピッカー作成シリーズ > Androidアプリ開発初心者がkotlinでカラーピッカーを作ってみるよ！ その13

Androidアプリ開発初心者がkotlinでカラーピッカーを作ってみるよ！ その13

カラーピッカー作成シリーズ

　どうも！LSSです！

 

　カラーピッカー作成の続きやっていきます！
　今回は「一定時間以上、変更しなかった色を自動的に記録してくれる機能」を作っていきますよ！
※今回はその前編で、記録したデータを読み込む部分の作成になります。

 

 

ちょっと「その４」を振り返り

　このシリーズのその４で、アイデアだしとして↓のように書きました。

 

 

いくつか、考えてる事はあります。

　列挙すると…

  • 気に入った色が出来た時に、ボタンを押すと「お気に入りの色」としてSQLiteデータベースに登録され、アプリを閉じて再度起動した後からでも「お気に入りの色」が一覧で確認、また再度シークバー・EditText・背景色に取り出せる。
  • 現状、色の設定はシークバーからのみですが、EditTextに直接打ち込んでも、シークバー・背景がそれに追従して変化する。
  • 赤緑青の比率を保ったまま、「暗くする」または「明るくする」事ができるようにする。
  • 一つめの「お気に入りの色」とは別に、数秒以上変更を加えなかった色は自動的に、それ用の履歴として記録する。
  • ランダムな色を提案してくれる機能。
  • 現在の設定色に近い色を提案してくれる機能。
  • 現在の色から遠く離れた、つまり目立ちやすい色を教えてくれる機能。

 

 　すでに実装したものは青字、今回やろうとしている事を赤字にしてみました。

 　また、その９の時に、

 

db.execSQL("CREATE TABLE COLORRC (_id INTEGER PRIMARY KEY AUTOINCREMENT , RC INTEGER , RCTIME INTEGER)")
db.execSQL("CREATE TABLE COLORSV (_id INTEGER PRIMARY KEY AUTOINCREMENT , SV INTEGER , SVTIME INTEGER)")

 

として２つ 、テーブルを用意していましたが、このうち「COLORSV」という方を「保存した色」を記録するのに使っていました。

　今回は「COLORRC」テーブルのほうを履歴色の記録に使用します！

 

 

xmlにボタンを１つ、追加します

f:id:little_strange:20191010215454p:plain

  • まず、activity_main.xmlを開きます。
  • 下の「Content Tree」を「乱数色をシャッフル」ボタンと「保存した色」ボタンが見える位置にスクロールします。
  • 「Button」を、「乱数色をシャッフル」と「保存した色」の間に、マウスドラッグで追加します。

 

 

 ↓のようにボタンが追加されればOKです！

f:id:little_strange:20191010220006p:plain

今、追加したボタンが選択状態になっているまま、画面の右、Attributesの方を触ります。

 

 

f:id:little_strange:20191010220339p:plain

↑の３か所を変更します。

  • 「id」を「btRCT」に打ち換えます。
  • 「text」を「最近みた色」に打ち換えます。
  • 「onClick」に「btRCTclk」と入力します。

 

　すると、画面は↓こんな感じになります。

f:id:little_strange:20191010220827p:plain

　ちなみに今までもそうでしたが、
onClickが赤枠になっているのは、その呼ばれるfunをまだ書いていないからで、
textがオレンジ枠になっているのは、本来strings.xmlに内容を書いてそれを呼ぶことが推奨されているのに直接文字列を入力しているからです。

 

　ところで、この段階での画面表示例は

f:id:little_strange:20191010221253p:plain

こんな風になっていますが、「最近みた色」「保存した色」となっている中で、「乱数色をシャッフル！」ってのがちょっと浮いているので、ボタンのtextを「ランダムな色」とでもしておきたいと思います。

 

　まず、「乱数色をシャッフル！」ボタンをクリックで選択して、画面右のAttributesで

f:id:little_strange:20191010221658p:plain

「text」の「乱数色をシャッフル！」を「ランダムな色」に打ち換えておきます。

 

 

 

f:id:little_strange:20191010222007p:plain

　さて？「ランダムな色」に変わったのはいいんですが、さっき追加した「最近みた色」だけがなんか幅をきかせています。
「最近みた色」をクリックで選択し、画面右のAttributesから「layout_weight」が「1」になっているのを削除しておきます。

 

f:id:little_strange:20191010222308p:plain

↑こんな風に、言葉も幅も、いい感じに並んだらOK！です^^

※何故、新たに置いたボタンとかが勝手にlayout_weightに1が入って、今まで置いたものはついてなかったのか、謎…。
　LSSのなんらかの操作が原因なのか、途中でAndroidStudioの仕様が変わったのか…？
 

　ともあれ、これで、xmlのほうの編集は以上となります。 

 

 

~閑話休題~

 　先日、amazonでポチったマウスが届きました！

　 これを買ったんですが、想像以上にコンパクトサイズでびっくり！

 　ノートPCのお供にはかなり良さそうです^^

 

　選んだポイントとしては、

  • 乾電池ではなく、充電池内蔵なので、充電し忘れなければ電池切れで突然動かなくなる、という心配がなさそう。
  • 電池が切れたら切れたで、一般的なスマホ用ケーブルで有線マウスとしても使用でき、その場合、同時に充電もされる。

ってあたりでしたが、コンパクトなかっこよさがそれを凌駕してしまいそうｗ 

 　あとは、満充電からどのぐらいの時間、電池がもつか…ですねぇ。

 

 

MainActivity.ktの編集に移ります

　さて、MainActivity.ktの編集画面に切り替えます。

 

　そして、まずは「fun btSVDclk(v:View){」があるところまで画面をスクロールさせます。 

f:id:little_strange:20191010234528p:plain

 

 

 　そしたら次に、そのbtSVDclkを↓のように選択して、

f:id:little_strange:20191010234755p:plain

キーボードの「CTRLキー」「Cキー」同時押し、または選択した部分を右クリックして「Copy」をクリックする事で、クリップボードに取り込みます。

 

　次に、↓の画面のように、何もない行を選択して、

f:id:little_strange:20191010235130p:plain

 

キーボードの「CTRLキー」「Vキー」同時押し、または右クリックして「Paste」を選択すると、

 

f:id:little_strange:20191010235417p:plain

内容が同じ、btSVDclkが２つになります！（名前かぶっちゃってるので赤い波線がつきます。）

 

で、うち片方を「最近みた色ボタンを押した時用」に書き換えていきます。

　今回は２つあるうちの、上のほうを書き換えたいと思います。

 

 

コピペしたコードを編集します！  

          

fun btSVDclk(v:View){
    val dbR=sqloh0.readableDatabase
    val cursor=dbR.rawQuery("select SV , SVTIME from COLORSV order by SVTIME desc",null)

    for (i in 0..15){
        if (cursor.moveToNext()){
            btcl[i]=cursor.getInt(cursor.getColumnIndex("SV"))
            btns[i].setBackgroundColor(255*256*256*256+btcl[i])
        }else{
            btcl[i]= 0
            btns[i].setBackgroundColor(255*256*256*256)
        }
    }
    cursor.close()
}

 

　こちらが、該当のコードです。

 

　まず、冒頭の「btSVDclk」を「btRCTclk」に打ち換えます。

　それだけで、まず赤い波線が消えますね。

 

　次に、「SV」という２文字をこのなかから探します。

f:id:little_strange:20191011000400p:plain

 

　５つ見つかりました。

　この５つの「SV」を全て「RC」に打ち換えます。

  

fun btRCTclk(v:View){
    val dbR=sqloh0.readableDatabase
    val cursor=dbR.rawQuery("select RC , RCTIME from COLORRC order by RCTIME desc",null)

    for (i in 0..15){
        if (cursor.moveToNext()){
            btcl[i]=cursor.getInt(cursor.getColumnIndex("RC"))
            btns[i].setBackgroundColor(255*256*256*256+btcl[i])
        }else{
            btcl[i]= 0
            btns[i].setBackgroundColor(255*256*256*256)
        }
    }
    cursor.close()
}

 　こういうコードになります。

 

※ちょっと説明すると、テーブルを定義した時に、「COLORSV」テーブルと「COLORRC」テーブルの内容を、テーブル名・列名ともに、名前の「SV」と「RC」が違う以外は全く同じになるように作っていました。
　なので、COLORSVを読むのと同じ要領で、COLORRCを読むコードに変更するのは、これだけの変更で事たります^^

 

 …というところで、ちょっと長くなってきたので、このへんで一旦、区切りにします。

　今の時点で、「最近みた色」ボタンを押すと、「COLORRC」テーブルの内容が4×4に並んだボタンに反映されるようになっていますが、「COLORRC」テーブルに記録する部分をまだ作っていないので全てのボタンが黒になるという状態です^^; 

 

　さて次回！は、その記録する部分を追加します！

　ではまた、次回もよろしくお願いします^^