# Toolbar
{%hackmd bVWcIzSWRcOp-bzo6RbA9A %}
## 主線任務-上方固定欄位
### 在XML建立Toolbar
```
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:background="@color/white"
android:elevation="4dp">
</androidx.appcompat.widget.Toolbar>
```
放在main_activity.xml([Android Studio漢堡選單(左側選單)1](https://hackmd.io/@TandyLiao45/BJdziX_TT)>放在RelativeLayout裡)
### 用java召喚元件到Toolbar
請搭配[Android Studio漢堡選單(左側選單)2](https://hackmd.io/@TandyLiao45/H1_bXV_6a)使用效果更好
#### 漢堡選單觸發器
要怎麼召喚他呢?
在MainActivity.java
```
private Toolbar toolbar;
```
先宣告
在oncreate
```
toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
```
setSupportActionBar(toolbar)>Toolbar替代ActionBar>找到的工具欄设置操作欄
這樣就會顯示在界面的頂部，且可以進行自定義操作。
```
ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this, drawerLayout, toolbar, R.string.drawer_open,R.string.drawer_close);
drawerLayout.addDrawerListener(toggle);
toggle.syncState();
```
ActionBarDrawerToggle>管理抽屜選單的開關動作
ActionBarDrawerToggle() 接受五個參數：
Activity 物件：當前Activity
DrawerLayout 物件：選單布局
Toolbar 物件：替代傳統的ActionBar
int 型參數：用於指定選單打開時的描述字串ID
int 型參數：用於指定選單關閉時的描述字串ID
addDrawerListener(toggle) 方法將 ActionBarDrawerToggle 物件添加到選單>監聽選單
toggle.syncState() 方法用於同步抽屜開關按鈕的狀態>使得觸發器能夠根據當前選單狀態切換
在res>values>string.xml
```
<string name="drawer_open">Drawer_opened</string>
<string name="drawer_close">Drawer_closed</string>
```
以上就可以使用啦欸嘿
#### 漢堡選單觸發器-支線任務1-改變觸發器顏色
```
toggle.getDrawerArrowDrawable().setColor(getResources().getColor(R.color.green));
```
green要在res>values>color.xml設定>無法直接打色碼QQ
#### 搜尋欄位
在MapsFragment.java
```
private Toolbar toolbar;
```
先宣告
在onViewCreated
```
toolbar = getActivity().findViewById(R.id.toolbar);
```
在onResume
搜尋欄底部自訂樣式
```
CardView cardmap = new CardView(requireContext());
int widthInPixels = 450dp;
int heightInPixels = 50dp;
cardmap.setLayoutParams(new CardView.LayoutParams(widthInPixels, heightInPixels));
```
widthInPixels/heightInPixels>自訂長寬
```
Drawable drawable = ContextCompat.getDrawable(requireContext(), R.drawable.cardviewmap_shape);
cardmap.setBackground(drawable);
```
改變CardView樣式(圓角)
新增xml檔>res>drawable>cardviewmap_shape
```
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:topLeftRadius="20dp"
android:topRightRadius="20dp"
android:bottomLeftRadius="20dp"
android:bottomRightRadius="20dp"/>
<solid android:color="@color/gray"/>
</shape>
```
建立LinearLayout在CardView等等放圖案和文字
```
LinearLayout linearLayout = new LinearLayout(requireContext());
linearLayout.setLayoutParams(new LinearLayout.LayoutParams(
LinearLayout.LayoutParams.MATCH_PARENT,
LinearLayout.LayoutParams.MATCH_PARENT ));
linearLayout.setOrientation(LinearLayout.HORIZONTAL);
```
匯入icon
```
ImageView mapmark = new ImageView(requireContext());
mapmark.setImageResource(R.drawable.magnifier_search);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
100, // 设置寬度 100 像素
100 // 设置高度100 像素
);
params.setMarginStart(10); // 設左邊距
mapmark.setLayoutParams(params);
```
創建EditText
```
EditText edmap = new EditText(requireContext());
edmap.setHint("搜尋地點");
edmap.setTextColor(getResources().getColor(R.color.green));
edmap.setLayoutParams(new CardView.LayoutParams(widthInPixels, heightInPixels));
edmap.setSingleLine(true);
edmap.setImeOptions(EditorInfo.IME_ACTION_SEARCH);
```
setSingleLine>輸入單行
setImeOptions(EditorInfo.IME_ACTION_SEARCH)>打完文字鍵盤是直接送出搜尋(不會換行)
圖層疊疊樂
```
linearLayout.addView(mapmark);
linearLayout.addView(edmap);
cardmap.addView(linearLayout);
```
cardview新增到actionBar
```
ActionBar actionBar = ((AppCompatActivity) getActivity()).getSupportActionBar();
if (actionBar != null) {
actionBar.setDisplayShowTitleEnabled(false); // 隐藏原有的标题
actionBar.setDisplayShowCustomEnabled(true);
actionBar.setCustomView(cardmap, new ActionBar.LayoutParams(
ActionBar.LayoutParams.WRAP_CONTENT, // 宽度设置为 WRAP_CONTENT
ActionBar.LayoutParams.WRAP_CONTENT, // 高度设置为 WRAP_CONTENT
Gravity.CENTER)); // 将包含 TextView 的 CardView 设置为自定义视图
actionBar.show();
}
```
**onResume全部程式碼**
```
public void onResume() {
super.onResume();
//建立CardView在toolbar
CardView cardmap = new CardView(requireContext());
int widthInPixels = getResources().getDimensionPixelSize(R.dimen.map_width);
int heightInPixels = getResources().getDimensionPixelSize(R.dimen.map_height);
cardmap.setLayoutParams(new CardView.LayoutParams(widthInPixels, heightInPixels));
Drawable drawable = ContextCompat.getDrawable(requireContext(), R.drawable.cardviewmap_shape);
cardmap.setBackground(drawable);
//建立LinearLayout在CardView等等放圖案和文字
LinearLayout linearLayout = new LinearLayout(requireContext());
linearLayout.setLayoutParams(new LinearLayout.LayoutParams(
LinearLayout.LayoutParams.MATCH_PARENT,
LinearLayout.LayoutParams.MATCH_PARENT
));
linearLayout.setOrientation(LinearLayout.HORIZONTAL);
//
ImageView mapmark = new ImageView(requireContext());
mapmark.setImageResource(R.drawable.magnifier_search);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
100, // 设置宽度为 100 像素
100 // 设置高度为 100 像素
);
params.setMarginStart(10); // 设置左边距
mapmark.setLayoutParams(params);
// 創建EditText
EditText edmap = new EditText(requireContext());
edmap.setHint("搜尋地點");
edmap.setTextColor(getResources().getColor(R.color.green));
edmap.setLayoutParams(new CardView.LayoutParams(widthInPixels, heightInPixels));
edmap.setSingleLine(true);
edmap.setImeOptions(EditorInfo.IME_ACTION_SEARCH);
linearLayout.addView(mapmark);
linearLayout.addView(edmap);
cardmap.addView(linearLayout);
// 將cardview新增到actionBar
ActionBar actionBar = ((AppCompatActivity) getActivity()).getSupportActionBar();
if (actionBar != null) {
actionBar.setDisplayShowTitleEnabled(false); // 隐藏原有的标题
actionBar.setDisplayShowCustomEnabled(true);
actionBar.setCustomView(cardmap, new ActionBar.LayoutParams(
ActionBar.LayoutParams.WRAP_CONTENT, // 宽度设置为 WRAP_CONTENT
ActionBar.LayoutParams.WRAP_CONTENT, // 高度设置为 WRAP_CONTENT
Gravity.CENTER)); // 将包含 TextView 的 CardView 设置为自定义视图
actionBar.show();
}
}
```
#### 小標籤
在BookFragment.java
```
private Toolbar toolbar;
```
先宣告
在onViewCreated
```
toolbar = getActivity().findViewById(R.id.toolbar);
```
在onResume
建立標籤底部
```
CardView cardViewtitle = new CardView(requireContext());
cardViewtitle.setLayoutParams(new CardView.LayoutParams(ActionBar.LayoutParams.MATCH_PARENT,
ActionBar.LayoutParams.MATCH_PARENT));
```
CardView大小隨子物件變動
```
Drawable drawable = ContextCompat.getDrawable(requireContext(), R.drawable.cardviewtitle_shape);
cardViewtitle.setBackground(drawable);
```
新增xml檔>res>drawable>cardviewtitle_shape
```
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:topLeftRadius="20dp"
android:topRightRadius="0dp"
android:bottomLeftRadius="20dp"
android:bottomRightRadius="0dp"/>
<solid android:color="@color/gray"/>
</shape>
```
建立LinearLayout在CardView等等放圖案和文字
```
LinearLayout linearLayout = new LinearLayout(requireContext());
linearLayout.setLayoutParams(new LinearLayout.LayoutParams(
LinearLayout.LayoutParams.MATCH_PARENT,
LinearLayout.LayoutParams.MATCH_PARENT ));
linearLayout.setOrientation(LinearLayout.HORIZONTAL);
```
匯入icon
```
ImageView bookmark = new ImageView(requireContext());
bookmark.setImageResource(R.drawable.bookmark);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
100, // 设置宽度为 100 像素
100 // 设置高度为 100 像素
);
params.setMarginStart(10);
bookmark.setLayoutParams(params);
```
創建TextView
```
TextView bookTitle = new TextView(requireContext());
bookTitle.setText("書籤");
bookTitle.setTextSize(15);
bookTitle.setTextColor(getResources().getColor(R.color.green));
bookTitle.setPadding(10, 10, 10, 10);
```
圖層疊疊樂
```
linearLayout.addView(bookmark);
linearLayout.addView(bookTitle);
cardViewtitle.addView(linearLayout);
```
將cardview新增到actionBar
```
ActionBar actionBar = ((AppCompatActivity) getActivity()).getSupportActionBar();
if (actionBar != null) {
actionBar.setDisplayShowTitleEnabled(false); // 隐藏原有的標題
actionBar.setDisplayShowCustomEnabled(true);
actionBar.setCustomView(cardViewtitle, new ActionBar.LayoutParams(
ActionBar.LayoutParams.WRAP_CONTENT,
ActionBar.LayoutParams.WRAP_CONTENT,
Gravity.END));
actionBar.show();
}
```
Gravity.END>靠最右邊
**onResume全部程式碼**
```
@Override
public void onResume() {
super.onResume();
tx1.setText("Book Fragment");
//建立CardView在toolbar
CardView cardViewtitle = new CardView(requireContext());
cardViewtitle.setLayoutParams(new CardView.LayoutParams(ActionBar.LayoutParams.MATCH_PARENT,
ActionBar.LayoutParams.MATCH_PARENT));
Drawable drawable = ContextCompat.getDrawable(requireContext(), R.drawable.cardviewtitle_shape);
cardViewtitle.setBackground(drawable);
//建立LinearLayout在CardView等等放圖案和文字
LinearLayout linearLayout = new LinearLayout(requireContext());
linearLayout.setLayoutParams(new LinearLayout.LayoutParams(
LinearLayout.LayoutParams.MATCH_PARENT,
LinearLayout.LayoutParams.MATCH_PARENT
));
linearLayout.setOrientation(LinearLayout.HORIZONTAL);
//
ImageView bookmark = new ImageView(requireContext());
bookmark.setImageResource(R.drawable.bookmark);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
100, // 设置宽度为 100 像素
100 // 设置高度为 100 像素
);
params.setMarginStart(10); // 设置左边距
bookmark.setLayoutParams(params);
// 創建TextView
TextView bookTitle = new TextView(requireContext());
bookTitle.setText("書籤");
bookTitle.setTextSize(15);
bookTitle.setTextColor(getResources().getColor(R.color.green)); // 更改文字颜色
bookTitle.setPadding(10, 10, 10, 10); // 设置内边距
linearLayout.addView(bookmark);
linearLayout.addView(bookTitle);
cardViewtitle.addView(linearLayout);
// 將cardview新增到actionBar
ActionBar actionBar = ((AppCompatActivity) getActivity()).getSupportActionBar();
if (actionBar != null) {
actionBar.setDisplayShowTitleEnabled(false); // 隐藏原有的標題
actionBar.setDisplayShowCustomEnabled(true);
actionBar.setCustomView(cardViewtitle, new ActionBar.LayoutParams(
ActionBar.LayoutParams.WRAP_CONTENT,
ActionBar.LayoutParams.WRAP_CONTENT,
Gravity.END));
actionBar.show();
}
}
```
Sign in with Wallet
Connect another wallet