如何使用textview / edittext而不是image创建灵活的空间标题?

时间:2015-05-27 18:22:25

标签: android user-interface material-design

我想创建具有类似下图的UI的应用程序。

  

我已经查看了以下库ManuelPeinado/FadingActionBarksoichiro/Android-ObservableScrollViewkmshack/Android-ParallaxHeaderViewPagerflavienlaurent/NotBoringActionBar,但没有一个能够添加{{1}的组合},EditTextTextview

Playstore上已有一个应用similar functionality

紫色颜色部分的官方名称是什么?

我完全感到沮丧,因为我无法找到任何ImageViewtutorials来帮助我完成项目。

感谢任何帮助!

Here is the image

2 个答案:

答案 0 :(得分:1)

您可以将视图直接添加到工具栏,因为它是一个视图组。然后你只需将它设置为supportActionBar

代码 styles.xml

<resources>

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="windowActionBar">false</item>
</style>

Main的布局:

<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">

自定义工具栏布局:

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

   <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/abc_ic_menu_moreoverflow_mtrl_alpha"/>

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:hint="Enter Text"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textview"
        android:text="Hello world"/>
   </LinearLayout>

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

主要活动:

package com.example.ppoborca.testers;

import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.TextView;


public class MainActivity extends ActionBarActivity {

    private Toolbar mToolbar;
    private TextView mTextView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mToolbar = (Toolbar) findViewById(R.id.toolbar);
        mTextView = (TextView) mToolbar.findViewById(R.id.textview);
        mTextView.setText("This worked!");
        setSupportActionBar(mToolbar);
    }

}

my result

答案 1 :(得分:0)

在互联网上搜索了4天后,我终于在github上找到了this示例,它非常易于使用,并且有blogspot逐行解释所有代码。