[Web] Custom File Button

我們常用的 html upload file 的語法
<input type="file" value="Upload" />
會產生一個普通的按鈕
如果要保留 file chooser 功能又要美化按鈕外觀的話
可以搭配 CSS


style.css

.file_button_container,
.file_button_container input {
  height: 48px;
  width: 48px;
}
.file_button_container {
  background: transparent url(images/choose_file.png) left top no-repeat;
}
.file_button_container input {
  opacity: 0;
  -moz-opacity: 0.0;
  filter: alpha(opacity=00);
}


在 html 裡, 用一個 class 為 file_button_container 的 div
包住 file button


<div class="file_button_container" id="userfile_div">
<input id="userfile" name="userfile" type="file" />
</div>



就可以了

[Android] Custom TabHost

(1)基本的 Android Tabs 教學
http://jimmy319.blogspot.com/2011/08/android-tab-view-content.html

(2)讓 TabWidget 有 highlight/normal 模式的方法
1. 產生 tab_style.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" android:drawable="@drawable/tab_highlight" />
    <item android:state_focused="true" android:drawable="@drawable/tab_highlight" />
    <item android:state_pressed="true" android:drawable="@drawable/tab_highlight" />
    <item android:state_selected="false" android:drawable="@drawable/tab_normal" />
</selector>
其中 tab_highlight/tab_normal 是圖檔

2. 設定 TabSpec

TabSpec tab = tabHost.newTabSpec("tab1");
tab.setIndicator("TAB1", getResources().getDrawable(R.drawable.tab_style));
tab.setContent(new Intent(this, MyTabActivity.class));
tabHost.addTab(tab);

成果如下

(3)縮短 TabWidget
1. 產生 tab 要用的 TextView

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:gravity="center"
    android:orientation="vertical">

<TextView android:id="@+id/tabsText"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="20dip"
    android:textColor="@drawable/tab_text_style"/>
</LinearLayout>

2. 利用 LayoutInflater 產生 TextView instance

private View createTabView(final Context context, final String text)
{
    View view = LayoutInflater.from(context).inflate(R.layout.tabs_text_only, null);
    TextView tv = (TextView) view.findViewById(R.id.tabsText);
    tv.setText(text);
    return view;
}


3. 設定 TabSpec Indicator 為 TextView

View tabView = createTabView(this, tag);
TabSpec tabSpec = tabHost.newTabSpec(tag).setIndicator(tabView)

4. 加上 tab divider
以下程式碼必須加在 create TabSpec 之前
tabHost.getTabWidget().setDividerDrawable(R.drawable.tab_divider);
最後的成果如下

參考
http://joshclemm.com/blog/?p=136