2014年1月22日水曜日

ActionBarを使ってみる(NAVIGATION_MODE_TABS + ViewPager Android 2.2以上)

依然書いた記事で「PagerTabStripを使ってみる 」で、
Google Play ストアっぽいメニューを表示させていましたが、
良く見てみるとなんていうか・・・メニュー部分の見た目が全然違っていましたね:(;゙゚'ω゚'):

Google Playストアっぽいメニューにするには、
ActionBarのNAVIGATION_MODE_TABSを使い、
中身はViewPagerを使って作った方がよりGoogle Playストアに近づきましたワーイヽ(゚∀゚)メ(゚∀゚)メ(゚∀゚)ノワーイ

■AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.actionbar11"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="10"
        android:targetSdkVersion="18" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/Theme.AppCompat" >
        <activity
            android:name="com.example.actionbar11.MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>
■activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin" >

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

</LinearLayout>

■CustomPagerAdapter.java
package com.example.actionbar11;

import java.util.ArrayList;

import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.util.Log;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class CustomPagerAdapter extends PagerAdapter {

 /** コンテキスト. */
 private Context mContext;

 /** リスト. */
 private ArrayList<Integer> mList;

 /*
  * コンストラクタ.
  */
 public CustomPagerAdapter(Context context) {
  mContext = context;
  mList = new ArrayList<Integer>();
 }

 /*
  * リストにアイテムを追加する.
  * 
  * @param item アイテム
  */
 public void add(Integer item) {
  Log.d("CustomPagerAdapter", "add");
  mList.add(item);
 }

 /*
  * アイテムを追加するときに呼ばれる。このメソッド内で View をコンテナに追加する。
  * 
  * @see
  * android.support.v4.view.PagerAdapter#instantiateItem(android.view.ViewGroup
  * , int)
  */
 @Override
 public Object instantiateItem(ViewGroup container, int position) {
  Log.d("CustomPagerAdapter", "instantiateItem");
  // リストから取得
  Integer item = mList.get(position);

  // View を生成
  TextView textView = new TextView(mContext);
  textView.setText("Page:" + position);
  textView.setTextSize(30);
  textView.setGravity(Gravity.CENTER);

  // コンテナに追加
  container.addView(textView);

  return textView;
 }

 /*
  * アイテムを削除するときに呼ばれる。このメソッド内で View の削除をおこなう。
  * 
  * @see
  * android.support.v4.view.PagerAdapter#destroyItem(android.view.ViewGroup,
  * int, java.lang.Object)
  */
 @Override
 public void destroyItem(ViewGroup container, int position, Object object) {
  // コンテナから View を削除
  container.removeView((View) object);
 }

 /*
  * ViewPager に登録する全アイテム数を返す。
  * 
  * @see android.support.v4.view.PagerAdapter#getCount()
  */
 @Override
 public int getCount() {
  // リストのアイテム数を返す
  return mList.size();
 }

 /*
  * Object に View が含まれているか判定する。
  * 
  * @see
  * android.support.v4.view.PagerAdapter#isViewFromObject(android.view.View,
  * java.lang.Object)
  */
 @Override
 public boolean isViewFromObject(View view, Object object) {
  // Object 内に View が存在するか判定する
  // return view == (TextView) object;
  return view.equals(object);
 }
}
■MainActivity.java
package com.example.actionbar11;

import android.app.Activity;
import android.os.Bundle;
import android.support.v4.app.FragmentTransaction;
import android.support.v4.view.ViewPager;
import android.support.v7.app.ActionBar;
import android.support.v7.app.ActionBar.Tab;
import android.support.v7.app.ActionBarActivity;
import android.util.Log;

public class MainActivity extends ActionBarActivity {

 private static ViewPager mViewPager = null;
 private CustomPagerAdapter mPagerAdapter;

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

  // action bar を取得する
  final ActionBar ab = getSupportActionBar();

  int length = 12;

  // ViewPagerを取得する
  mViewPager = (ViewPager) findViewById(R.id.viewpager);
  // アダプターを設定する
  mPagerAdapter = new CustomPagerAdapter(this);

  for (int i = 0; i < length; i++) {
   // アダプター経由でViewPagerに追加する
   mPagerAdapter.add(i);
  }

  /**
   * スワイプしたときにもActionbarのタブ(NavigationItem)を常に表示させる処理
   */
  mViewPager
    .setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
     @Override
     public void onPageSelected(int position) {
      ab.setSelectedNavigationItem(position);
     }
    });

  // アダプターを設定する
  mViewPager.setAdapter(mPagerAdapter);

  // ActionBarのアイコンを表示しないようにする。 true:表示/false:非表示
  ab.setDisplayShowHomeEnabled(false);
  // ActionBarのタイトル名を表示しないようにする。true:表示/false:非表示
  ab.setDisplayShowTitleEnabled(false);

  // ActionBarのNavigationModeを設定する
  ab.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

  // 設定指定あるアダプターの件数を取得する
  int lengthViewPagerCount = mPagerAdapter.getCount();

  // リスナー生成
  MainTabListener listener = new MainTabListener(this);

  // タブにリスナーを追加する
  for (int i = 0; i < lengthViewPagerCount; i++) {
   // タブを追加する
   Tab tab = ab.newTab().setText("Tab" + String.valueOf(i))
     .setTabListener(listener);
   ab.addTab(tab);
  }

  // デフォルトの状態選択を変更する
  ab.setSelectedNavigationItem(0);

 }

 /*
  * ActionBarのタブリスナー
  */
 public static class MainTabListener implements ActionBar.TabListener {

  private final Activity activity;

  public MainTabListener(Activity activity) {
   this.activity = activity;
  }

  /*
   * 選択されているタブが再度選択された場合に実行
   * 
   * @see
   * android.support.v7.app.ActionBar.TabListener#onTabReselected(android.
   * support.v7.app.ActionBar.Tab,
   * android.support.v4.app.FragmentTransaction)
   */
  @Override
  public void onTabReselected(Tab tab, FragmentTransaction ft) {
   // TODO Auto-generated method stub
   Log.d("MainActivity", "onTabReselected " + tab.getText()
     + " : position => " + tab.getPosition());

  }

  /*
   * タブが選択された場合に実行
   * 
   * @see
   * android.support.v7.app.ActionBar.TabListener#onTabSelected(android
   * .support .v7.app.ActionBar.Tab,
   * android.support.v4.app.FragmentTransaction)
   */
  @Override
  public void onTabSelected(Tab tab, FragmentTransaction ft) {
   // TODO Auto-generated method stub
   Log.d("MainActivity", "onTabSelected " + tab.getText()
     + " : position => " + tab.getPosition());

   // ここで表示するフラグメントを決定する
   // setCurrentItem で、下記の SectionPagerAdapter の getItem を呼び出し
   mViewPager.setCurrentItem(tab.getPosition());

  }

  /*
   * タブの選択が外れた場合に実行
   * 
   * @see
   * android.support.v7.app.ActionBar.TabListener#onTabUnselected(android.
   * support.v7.app.ActionBar.Tab,
   * android.support.v4.app.FragmentTransaction)
   */
  @Override
  public void onTabUnselected(Tab tab, FragmentTransaction ft) {
   // TODO Auto-generated method stub
   Log.d("MainActivity", "onTabUnselected " + tab.getText()
     + " : position => " + tab.getPosition());

   // Fragment削除
   // ft.remove(mFragment);

  }
 }

}
実行結果は次のようになります。

スワイプまたは、タブを選択すると横に移動する、



以上です(`・ω・´)ゞビシッ!!

参考URL

ExpandableListViewを使ってみる

今回はExpandableListViewを試したいと思います( ´∀`)bグッ!

殆どListViewと同じですが、違う点としてはアイテムをまとめてグループ化(サブメニュー的な?)が出来る点になります。
クリックするとメニューが開閉される感じですね!(゚д゚)(。_。)(゚д゚)(。_。) ウンウン

■AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.expandablelist1"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="10"
        android:targetSdkVersion="17" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="com.example.expandablelist1.MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>
■activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:background="#000000"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <ExpandableListView
        android:id="@+id/exlist"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>
■res/values/array.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string-array name="group_list_parent">
        <item>parent1</item>
        <item>parent2</item>
    </string-array>
    <string-array name="group_list_child_0">
        <item>parent1_1</item>
        <item>parent1_2</item>
        <item>parent1_3</item>
    </string-array>
    <string-array name="group_list_child_1">
        <item>parent2_1</item>
        <item>parent2_2</item>
    </string-array>
</resources>
■MainActivity.java
package com.example.expandablelist1;

import android.os.Bundle;
import android.app.Activity;

import java.util.ArrayList;
import java.util.HashMap;

import android.widget.ExpandableListView;
import android.widget.SimpleExpandableListAdapter;

public class MainActivity extends Activity {

 private static final String TAG = "MainActivity";

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

  setContentView(R.layout.activity_main);
  ExpandableListView view = (ExpandableListView) findViewById(R.id.exlist);

  //
  HashMap info = getResourcesDataExpandableListAdapter("group_list_");

  // groupDataのどのキーデータを利用するか
  String parentName = (String) info.get("parent_name");
  // childDataのどのキーデータを利用するか
  String childName = (String) info.get("child_name");

  // 親一覧用の変数(Adapterで利用するために親だけの一覧用)
  ArrayList<HashMap<String, String>> groupData = (ArrayList<HashMap<String, String>>) info
    .get("parent");

  // 子一覧用の変数(Adapterで利用するために親だけの一覧用)
  ArrayList<ArrayList<HashMap<String, String>>> childData = (ArrayList<ArrayList<HashMap<String, String>>>) info
    .get("child");

  // 親リスト、子リストを含んだAdapterを生成
  SimpleExpandableListAdapter adapter = new SimpleExpandableListAdapter(
    getApplicationContext(), groupData,
    android.R.layout.simple_expandable_list_item_1,
    new String[] { parentName }, new int[] { android.R.id.text1 },
    childData, android.R.layout.simple_expandable_list_item_2,
    new String[] { childName, parentName }, new int[] {
      android.R.id.text1, android.R.id.text2 });

  // ExpandableListViewにAdapterをセット
  view.setAdapter(adapter);
 }

 /*
  *
  */
 private HashMap getResourcesDataExpandableListAdapter(String prefixGroupName) {

  // 親一覧用の変数(Adapterで利用するために親だけの一覧用)
  ArrayList<HashMap<String, String>> groupData = new ArrayList<HashMap<String, String>>();
  String parentName = "parent";

  // 子一覧用の変数
  ArrayList<ArrayList<HashMap<String, String>>> childData = new ArrayList<ArrayList<HashMap<String, String>>>();
  String childName = "child";

  // 親一覧用のstring-arrayのnameにつけた名前のプレフィックス
  // String prefixGroupName = "group_list_";
  String prefixGroupNameChild = prefixGroupName + "";

  // リソースIDを動的に取得する
  int resouresIdParent = getResources().getIdentifier(
    prefixGroupName + "parent", "array", getPackageName());
  // 親一覧を取得する
  // String[] parent = getResources().getStringArray(R.array.parent);
  // 親一覧を取得する
  String[] parent = getResources().getStringArray(resouresIdParent);
  // 親の数を取得する
  int size = parent.length;
  // 親のリストだけループ
  for (int i = 0; i < size; i++) {

   //
   HashMap<String, String> group = new HashMap<String, String>();
   // 親の名前を取得する
   String item = parent[i];
   // parentというキー値に親の名前を設定する
   group.put(parentName, item);
   // Adapterで利用するために親だけの一覧用
   groupData.add(group);

   // リソースIDを生成する
   String childId = prefixGroupNameChild + "child_" + i;
   // リソースIDを動的に取得する
   int arrayId = getResources().getIdentifier(childId, "array",
     getPackageName());
   // 子一覧をxmlから取得する
   String[] child = getResources().getStringArray(arrayId);

   // 子一覧の設定用
   ArrayList<HashMap<String, String>> childList = new ArrayList<HashMap<String, String>>();
   for (String childItem : child) {
    // 子1つの情報用
    HashMap<String, String> childHash = new HashMap<String, String>();
    // 親の名前を設定
    childHash.put(parentName, item);
    // 子の名前を設定
    childHash.put(childName, childItem);
    // 子のリストに追加
    childList.add(childHash);
   }

   //
   childData.add(childList);
  }

  //
  HashMap tmp = new HashMap();
  //
  tmp.put("parent_name", parentName);
  //
  tmp.put("child_name", childName);
  // 親一覧用の変数(Adapterで利用するために親だけの一覧用)
  tmp.put("parent", groupData);
  // 子一覧用の変数(Adapterで利用するために親だけの一覧用)
  tmp.put("child", childData);
  //
  return tmp;

 }

}

デフォルトではリストは折りたたまれています。


メニューをクリックすると開閉されます。

以上です(`・ω・´)ゞビシッ!!

参考URL

2014年1月17日金曜日

WebView loadData css反映 はまった事をメモ


htmlをwebViewで表示する際にはまったのでメモします。


 

  String data = "<html>" +
    "<head>" +
    "<style css="" text="" type="\">body img{max-width:100%;height:auto;}</style>" +
    "</head>";
  data += "<body>内容<img src="" />//★めっちゃ大きな画像</body>";
  data += "</html>";

 webview.loadData(data, "text/html; charset=utf-8", "UTF-8");


この大きな画像が表示領域からでないようにしたかったのですが
max-widthのあたりで表示がされなくなってしまいました。。

しかし100%→100pxに変えてみると…表示されました(@@?)なんで?

当初はmax-widthが使用できないのかと思いましたがそうではなかったようで
探しているとloadData関数にバグがある事を発見(@@!!!)
どうも「%,#,\,?」が消されてしまうとかっ(・_・`)エー


以下のように書き換えてあげないといけない感じでした。
# => %23
% => %25
\ => %27
? => %3f


そして変更版がこれ↓ これではみ出さずに画像がおさまってくれました。(^Θ^)
 

  String data = "<html>" +
    "<head>" +
    "<style css="" text="" type="\">body img{max-width:100%25;height:auto;}</style>" +
    "</head>";
  data += "<body>内容<img src="" />//★めっちゃ大きな画像</body>";
  data += "</html>";

 webview.loadData(data, "text/html; charset=utf-8", "UTF-8");




ここのサイトのおかげで解決できました!ありがとうございます。m(._.)m
http://tsukinihinikeni.blogspot.jp/2011/03/webviewloaddataloaddatawithbaseurl1.html

2014年1月10日金曜日

TextViewオプションについて



■TextViewのオーバーフロー分の末尾に[…]をつけました。


setEllipsize(TextUtils.TruncateAt)

or

android:ellipsize


オプション
none    
 何もしません。
start 文字列の末尾から表示し、先頭を省略記号に置き換えます。
middle 文字列の先頭と末尾を表示し、中間に省略記号を挿入します。
end 文字列の先頭から表示し、末尾に省略記号を挿入します。
marquee 文字のスクロールを実行します。




■中央揃え  

android:gravity="center"

or

TextView#setGravity( Gravity.CENTER );


便利ですね~(@ω@)


■参考サイト
http://wikiwiki.jp/android/?UI%A5%B3%A5%F3%A5%DD%A1%BC%A5%CD%A5%F3%A5%C8%2FTextView

http://t-tlt-t.at.webry.info/201005/article_3.html

WebView loadData 4.0以降 文字化けについて


WebViewのloadDataを使用してhtmlデータを表示していたのですが、4.0以降が文字化けしてしまいました。

修正前

String data = "";
  data +=  "表示するやつ";
  Log.d( TAG, data );
  
  webview.loadData( data, "text/html", "UTF-8" );
 }

↓ ; charset=utf-8を追加

修正後

String data = "";
  data +=  "表示するやつ";
  Log.d( TAG, data );
  
  webview.loadData( data, "text/html; charset=utf-8", "UTF-8" );
 }



解決する事ができました(@w@)

■ 参考サイト
http://d.hatena.ne.jp/paraches/20120819

2014年1月6日月曜日

WebViewにPOSTする

WebViewを使用して情報登録を行う処理に挑戦しました。

以下の2つの方法で試してみました。(@_@)


1.Javascriptを追加する

String account_id = "********";
String account_pass = "********";

wv = (WebView)this.findViewById( R.id.webView1 );//用意されたwebview

//
StringBuffer sb = new StringBuffer();

sb.append("var id = document.getElementsByName('user_name');");
sb.append("id.item(0).value ='"+account_id+"';");
sb.append("var pass =  document.getElementsByName('password');");
sb.append("pass.item(0).value ='"+account_pass+"';");
sb.append("document.form.submit();");


//スクリプトを追加する
view.loadUrl( "javascript:"+javascript );

また、javascriptからjavaを呼び出す事もできます。
呼び出すクラスを用意する
public class JavaScriptInterface {
  
 public JavaScriptInterface(){}
 
 //この関数をjavascriptから呼び出します。
 public void test( String value ){
     Log.d( "test", value );
 } 
}

この2行でWebViewとの関連付けを行います。
    JavaScriptInterface jsi = new JavaScriptInterface();
    wv.addJavascriptInterface( jsi, "android" );//第2引き数は呼び出し時に使用する。

javascript側の記述
   android.test("javascriptから呼び出し");


2.WebViewにあるPostUrlを使用する

wv = (WebView)this.findViewById( R.id.webView1 );//用意されたwebview

//POST先
String url = "http://*********************";

//POSTしたい情報 post_data
//WebViewへPOST送信する
wv.postUrl( url , post_data.toString().getBytes() );