μΉ΄ν…Œκ³ λ¦¬ 보관물: Android

Android

Android νˆ΄λ°”μ—μ„œ λ²„νŠΌ λ§Œλ“€κΈ° 와 같은 Android 내뢀에

Toolbar이 iOS예제 와 같은 Android 내뢀에 λ²„νŠΌμ„ μ–΄λ–»κ²Œ λ§Œλ“€ 수 μžˆμŠ΅λ‹ˆκΉŒ?



λ‹΅λ³€

λ²„νŠΌ νŠœν† λ¦¬μ–Όμ΄μžˆλŠ” 도ꡬ λͺ¨μŒ

1-내뢀에 라이브러리 ν˜Έν™˜μ„± μΆ”κ°€ build.gradle

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:21.0.3'
}

2- 색상 color.xml을 μ •μ˜ ν•˜λŠ” 파일 이름 λ§Œλ“€κΈ°Toolbar

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="ColorPrimary">#FF5722</color>
    <color name="ColorPrimaryDark">#E64A19</color>
</resources>

3- style.xml파일 μˆ˜μ •

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

        <item name="colorPrimary">@color/ColorPrimary</item>
        <item name="colorPrimaryDark">@color/ColorPrimaryDark</item>
        <!-- Customize your theme here. -->
    </style>
</resources>

4-λ‹€μŒκ³Ό 같은 xml 파일 λ§Œλ“€κΈ° tool_bar.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
 xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimary"
    android:elevation="4dp" />

5- Toolbarκ·€ν•˜μ˜main_activity.xml

<RelativeLayout 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"
    tools:context=".MainActivity">

    <include
        android:id="@+id/tool_bar"
        layout="@layout/tool_bar" />

    <TextView
        android:layout_below="@+id/tool_bar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/TextDimTop"
        android:text="@string/hello_world" />

</RelativeLayout>

6-그런 λ‹€μŒ MainActivityμˆ˜μ—…μ— λ„£μœΌμ‹­μ‹œμ˜€.

package com.example.hp1.materialtoolbar;

import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.view.MotionEvent;
import android.view.View;
import android.widget.Toast;

/* When using AppCompat support library
 * (you need to extend Main Activity to
 * ActionBarActivity)
 * ActionBarActivity has deprecated, use AppCompatActivity
 */
public class MainActivity extends ActionBarActivity {
    // Declaring the Toolbar Object
    private Toolbar toolbar;

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

        // Attaching the layout to the toolbar object
        toolbar = (Toolbar) findViewById(R.id.tool_bar);
        // Setting toolbar as the ActionBar with setSupportActionBar() call
        setSupportActionBar(toolbar);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}

7-λ§ˆμ§€λ§‰μœΌλ‘œ β€œλ²„νŠΌ ν•­λͺ©β€μ„ 디렉토리 menu_main.xml내뢀에 μΆ”κ°€ν•©λ‹ˆλ‹€./res/menu/

<?xml version="1.0" encoding="utf-8"?>
   <menu
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        tools:context=".MainActivity">
        <item
            android:id="@+id/action_settings"
            android:orderInCategory="100"
            android:title="@string/action_settings"
            app:showAsAction="never" />
        <item
            android:id="@+id/action_search"
            android:orderInCategory="200"
            android:title="Search"
            android:icon="@drawable/ic_search"
            app:showAsAction="ifRoom"/>
        <item
            android:id="@+id/action_user"
            android:orderInCategory="300"
            android:title="User"
            android:icon="@drawable/ic_user"
            app:showAsAction="ifRoom" />
    </menu>

λ‹΅λ³€

도ꡬ λͺ¨μŒ μ‚¬μš©μž μ •μ˜λŠ” λ‹€μŒκ³Ό 같은 λ°©λ²•μœΌλ‘œ μˆ˜ν–‰ ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

μ•„λž˜μ™€ 같이 νˆ΄λ°” μ•ˆμ— λ²„νŠΌκ³Ό textViews μ½”λ“œλ₯Ό μž‘μ„±ν•©λ‹ˆλ‹€.

<android.support.v7.widget.Toolbar
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/app_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    >

    <Button
      android:layout_width="wrap_content"
        android:layout_height="@dimen/btn_height_small"
        android:text="Departure"
        android:layout_gravity="right"
        />
</android.support.v7.widget.Toolbar>

λ‹€λ₯Έ 방법은 μ•„λž˜μ™€ 같이 ν•­λͺ© 메뉴λ₯Ό μ‚¬μš©ν•˜λŠ” κ²ƒμž…λ‹ˆλ‹€.

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.menu_main, menu);
    return true;
}

λ‹΅λ³€

또 λ‹€λ₯Έ κ°€λŠ₯성은 app:actionViewClass메뉴 μ—μ„œ 속성 을 μ„€μ •ν•˜λŠ” κ²ƒμž…λ‹ˆλ‹€.

<menu xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto">
  <item
     android:id="@+id/get_item"
     android:orderInCategory="1"
     android:text="Get"
     app:showAsAction="always"
     app:actionViewClass="android.support.v7.widget.AppCompatButton"/>
</menu>

μ½”λ“œμ—μ„œ 메뉴가 ν™•μž₯ 된 후이 λ²„νŠΌμ— μ•‘μ„ΈμŠ€ ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

public boolean onCreateOptionsMenu(Menu menu) {
    MenuInflater menuInflater = getMenuInflater();
    menuInflater.inflate(R.menu.sample, menu);

    MenuItem getItem = menu.findItem(R.id.get_item);
    if (getItem != null) {
        AppCompatButton button = (AppCompatButton) getItem.getActionView();
        //Set a ClickListener, the text, 
        //the background color or something like that
    }

    return super.onCreateOptionsMenu(menu);
}

λ‹΅λ³€

ToolBar에 ν…μŠ€νŠΈλ₯Ό μΆ”κ°€ν–ˆμŠ΅λ‹ˆλ‹€.

menu_skip.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context=".MainActivity">

    <item
        android:id="@+id/action_settings"
        android:title="@string/text_skip"
        app:showAsAction="never" />
</menu>

MainActivity.java

@Override
boolean onCreateOptionsMenu(Menu menu) {
    inflater = getMenuInflater();
    inflater.inflate(R.menu.menu_otp_skip, menu);
    return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()) {
        // action with ID action_refresh was selected
        case R.id.menu_item_skip:
            Toast.makeText(this, "Skip selected", Toast.LENGTH_SHORT)
                    .show();
            break;
        default:
            break;
    }
    return true;
}

λ‹΅λ³€

도ꡬ λͺ¨μŒ / μž‘μ—… ν‘œμ‹œ μ€„μ—μ„œλŠ” 메뉴 ν•­λͺ© λ˜λŠ” μž‘μ—… λ‹¨μΆ”λΌκ³ ν•©λ‹ˆλ‹€. 여기에 Google μžμŠ΅μ„œκ°€ μž‘λ™ν•˜λŠ” 방법과 μΆ”κ°€ 방법이 μžˆμŠ΅λ‹ˆλ‹€.
https://developer.android.com/training/basics/actionbar/adding-buttons.html


λ‹΅λ³€

μ‹€μ œλ‘œ νˆ΄λ°” μ•ˆμ— 무엇이든 넣을 수 μžˆμŠ΅λ‹ˆλ‹€. μ•„λž˜ μ½”λ“œλ₯Ό μ°Έμ‘°ν•˜μ‹­μ‹œμ˜€.

<android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:background="@color/colorPrimary">

</android.support.v7.widget.Toolbar>

μœ„μ˜ νˆ΄λ°” νƒœκ·Έ μ‚¬μ΄μ—λŠ” 거의 λͺ¨λ“  것을 넣을 수 μžˆμŠ΅λ‹ˆλ‹€. 이것이 νˆ΄λ°” μ‚¬μš©μ˜ μ΄μ μž…λ‹ˆλ‹€.

좜처 : Android νˆ΄λ°” 예


λ‹΅λ³€

actionLayout지원 λΌμ΄λΈŒλŸ¬λ¦¬μ—μ„œ μ‚¬μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€ .

menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">

<item
    android:id="@+id/button_item"
    android:title=""
    app:actionLayout="@layout/button_layout"
    app:showAsAction="always"
    />
</menu>

button_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:orientation="horizontal">

<Button
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    />

</RelativeLayout>

Activity.java

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.menu, menu);
    MenuItem item = menu.findItem(R.id.button_item);
    Button btn = item.getActionView().findViewById(R.id.button);
    btn.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            Toast.makeText(MainActivity.this, "Toolbar Button Clicked!", Toast.LENGTH_SHORT).show();
        }
    });
    return true;
}

이 글은 Android μΉ΄ν…Œκ³ λ¦¬λ‘œ λΆ„λ₯˜λ˜μ—ˆκ³  λ‹˜μ— μ˜ν•΄ 에 μž‘μ„±λμŠ΅λ‹ˆλ‹€.