會伸縮的圖片(draw9patch、對話框的製作)

會伸縮的圖片(9patch)

前言：

9patch是可以拿來解決圖片拉伸問題所出現的東西。

假如我要做一個對話框，對話框要如何配合裡面的文字變長、變寬？

這時候就要用到我們的draw9patch.bat

---

使用：

draw9patch.bat通常在你的Android\sdk\tools內你會發現它。

如果真的找不到，請打開你的搜索bar直接輸入draw9patch.bat(下圖)

出現此畫面請不要關閉它，就算程式已經開啟也不要關閉，它們是唇齒相依的，關一個死兩個。(下圖)

在此開啟檔案(下圖)，選擇你要實作的圖片。

https://drive.google.com/open?id=0Byk75IYx-dKXclJkVm1VQTBuRVU

 開啟後就先來看圖說故事吧。(下圖)

真的要注意兩邊等長問題，不然Android會報錯誤。做白工！

完成之後左上角按下File > save 就完成囉。(下圖)

網路上會有些人說要使用去邊軟體，如果你是單純要Android 開發用，完全沒有必要。因為丟在程式內它會自動幫你忽略四周的黑線，當然如果你覺得礙眼也是可以使用xUltimate-d9pc-x86去四周的黑線，不引響。

如何使用呢？

android:background="@drawable/helloman" 

把剛放好的9patch圖片改名為helloman，設成TextView的background，你就會發現圖片會跟著內容的文字做延伸囉！

注意我改的名稱為helloman.9.png  後面的.9.png不能拿掉。不然會失去效果。


以下是這次程式的Demo範例

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    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="com.chat.a015865.ninepatchdemo.MainActivity">

    <TextView
        android:id="@+id/textshow_xml"
        android:text="What do u want to Say?"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:background="@drawable/helloman" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal">

        <EditText
            android:id="@+id/Edit_xml"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.8" />

        <Button
            android:id="@+id/enter_xml"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.2"
            android:text="輸入" />
    </LinearLayout>

</RelativeLayout>

MainActivity.java

public class MainActivity extends AppCompatActivity {

    private Button mEnter;
    private EditText mEditText;
    private TextView mTextViewShow;

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

        initView();

    }

    private void initView() {
        mEditText = (EditText) findViewById(R.id.Edit_xml);
        mEnter = (Button) findViewById(R.id.enter_xml);
        mTextViewShow = (TextView) findViewById(R.id.textshow_xml);
        mEnter.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                String getContent = mEditText.getText().toString();
                mTextViewShow.setText(getContent);
            }
        });
    }
}

Demo連結：https://drive.google.com/open?id=0Byk75IYx-dKXSGlQdHI2OWxNaU0