Android: ลบระยะขอบซ้ายออกจากเค้าโครงที่กำหนดเองของ actionbar


269

ฉันกำลังใช้มุมมองแถบแอ็คชั่นที่กำหนดเองและอย่างที่คุณเห็นในภาพหน้าจอด้านล่างจะมีพื้นที่สีเทาว่างเปล่าในแถบแอคชั่น ฉันต้องการลบ

ป้อนคำอธิบายรูปภาพที่นี่

ฉันทำอะไรลงไป:

ความละเอียด / ค่า-v11 / styles.xml

<style name="AppBaseTheme" parent="@style/Theme.AppCompat.Light">
        <item name="android:actionBarStyle">@style/ActionBarStyle</item>
        <item name="actionBarStyle">@style/ActionBarStyle</item>
</style>

ความละเอียด / ค่า / my_custom_actionbar.xml

<resources xmlns:android="http://schemas.android.com/apk/res/android">
    <style name="ActionBarStyle" parent="@style/Widget.AppCompat.Light.ActionBar.Solid">
        <item name="android:height">60dp</item>
    </style>
</resources>

ประจักษ์

<uses-sdk
        android:minSdkVersion="10"
        android:targetSdkVersion="19" />

<application
            android:icon="@drawable/ic_launcher"
            android:label="@string/AppName"
            android:theme="@style/AppBaseTheme" >
    <!-- activities... etc -->
</application>

กิจกรรมหลัก

public void onCreate(Bundle bundle) {
    super.onCreate(bundle);

    ActionBar actionbar = getSupportActionBar();

    actionbar.setDefaultDisplayHomeAsUpEnabled(false);
    actionbar.setDisplayHomeAsUpEnabled(false);
    actionbar.setDisplayShowCustomEnabled(true);
    actionbar.setDisplayShowHomeEnabled(false);
    actionbar.setDisplayShowTitleEnabled(false);
    actionbar.setDisplayUseLogoEnabled(false);
    actionbar.setHomeButtonEnabled(false);

    // Add the custom layout
    View view = LayoutInflater.from(this).inflate(R.layout.actionbar, null, false);
    actionbar.setCustomView(view);
}

ฉันพบโพสต์เมื่อเร็ว ๆ นี้ซึ่งชี้ให้เห็นว่ามีปัญหากับรีลีสล่าสุด ฉันได้อัปเดต ADT และ SDK เป็น Android 5 ด้วย

มุมมองที่กำหนดเองของ Android ActionBar ไม่ได้เติมข้อมูลแม่

ฉันไม่รู้ว่าควรทำอย่างไร

แก้ไข (โซลูชันบางส่วน):

ไม่ทำงานบน Android <= API 10

Android Lollipop, มุมมองที่กำหนดเอง AppCompat ActionBar ไม่ได้ใช้ความกว้างของหน้าจอทั้งหมด

ฉันมีอะไรเปลี่ยนแปลง:

ใช้ sdk เวอร์ชั่นล่าสุด:

<uses-sdk
        android:minSdkVersion="10"
        android:targetSdkVersion="21" />

เพิ่มtoolbarStyle:

<style name="AppBaseTheme" parent="@style/Theme.AppCompat.Light">
        <item name="android:actionBarStyle">@style/ActionBarStyle</item>
        <item name="actionBarStyle">@style/ActionBarStyle</item>

        <item name="android:toolbarStyle">@style/ToolbarStyle</item>
        <item name="toolbarStyle">@style/ToolbarStyle</item>
</style>

<style name="ToolbarStyle" parent="@style/Widget.AppCompat.Toolbar">
    <item name="contentInsetStart">0dp</item>
    <item name="android:contentInsetStart">0dp</item>
</style>


1
@Zbarcea มันไม่ทำงานในตอนท้ายของฉัน และสำหรับ android: toolbarStyle การร้องเรียน IDE เกี่ยวกับต้องใช้ api ระดับ 21 นาทีคือ 11 วิธีนี้ใช้ได้สำหรับคุณหรือไม่
โปรแกรมเมอร์

คำตอบ:


609

หากคุณกำลังเพิ่มToolbarผ่าน XML คุณสามารถเพิ่มแอ็ตทริบิวต์ XML เพื่อลบการแทรกเนื้อหา

<android.support.v7.widget.Toolbar
    xmlns:app="schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/primaryColor"
    android:contentInsetLeft="0dp"
    android:contentInsetStart="0dp"
    app:contentInsetLeft="0dp"
    app:contentInsetStart="0dp"
    android:contentInsetRight="0dp"
    android:contentInsetEnd="0dp"
    app:contentInsetRight="0dp"
    app:contentInsetEnd="0dp" />

2
xmlns: app = " schemas.android.com/apk/res-auto " สำหรับทุกคนที่ไม่มีส่วน 'แอพ' ของ xml
Prakash

3
อะไรคือความแตกต่างระหว่างการใช้ "แอพ:" และ "android:" .. ?
Micro

3
พวกมันต่างกันเนมสเปซ เนมสเปซ "android" นั้นใช้สำหรับแอตทริบิวต์ทั้งหมดที่กำหนดโดย Android OS เนมสเปซ "แอป" นั้นใช้สำหรับแอตทริบิวต์ที่กำหนดโดยแอปของคุณผ่านการนำเข้าไลบรารีหรือเพิ่มของคุณเองในไฟล์ attrs.xml โปรดทราบว่าเนมสเปซ "ที่จับ" สามารถเป็นอะไรก็ได้ที่คุณต้องการมันถูกกำหนดโดยใช้แอตทริบิวต์ xmlns บนเค้าโครงของคุณหรือในกรณีนี้ในองค์ประกอบของรูปแบบเอง คุณสามารถทำให้มันเป็น "xmlns: nougat" ถ้าคุณต้องการ เช่นในฐานข้อมูล Android ฉันมักจะใช้ "ผูก" สำหรับ bindingAdapters
LukeWaggoner

@idratherbeintheair ฉันมีมุมมองการค้นหาในแถบเครื่องมือ แต่เมื่อฉันซ่อนมันโดยใช้การมองเห็นเส้นขอบหมายถึงขอบเขตของมุมมองการค้นหาหมายถึงชนิดของเส้นขอบยังคงปรากฏบนแถบเครื่องมือ ความคิดใด ๆ
Jay Rathod RJ

24
ในกรณีของฉันการเพิ่มแอ็ตทริบิวต์นี้ให้กับ xml การออกแบบของandroid.support.v7.widget.Toolbar: app:contentInsetStartWithNavigation="0dp"ก็เพียงพอแล้ว
computingfreak

198

ลองนี้:

    ActionBar actionBar = getSupportActionBar();
    actionBar.setDisplayShowHomeEnabled(false);
    actionBar.setDisplayShowCustomEnabled(true);
    actionBar.setDisplayShowTitleEnabled(false);
    View customView = getLayoutInflater().inflate(R.layout.main_action_bar, null);
    actionBar.setCustomView(customView);
    Toolbar parent =(Toolbar) customView.getParent();
    parent.setPadding(0,0,0,0);//for tab otherwise give space in tab
    parent.setContentInsetsAbsolute(0,0);

ฉันใช้รหัสนี้ในโครงการของฉันโชคดี;


4
ยอดเยี่ยม parent.setContentInsetsAbsolute (0,0) ทำการหลอกลวง!
Bam

7
วิธีนี้ใช้ได้ผล อย่างไรก็ตามมันสามารถเปลี่ยนเค้าโครงเล็กน้อย หรือคุณสามารถทำได้actionBar.setCustomView(R.layout.app_title_bar); Toolbar parent =(Toolbar) actionBar.getCustomView().getParent(); parent.setContentInsetsAbsolute(0,0);มากกว่าที่จะพองเค้าโครง
Markymark

ไม่ทำงานสำหรับฉันแม้ว่าปัญหาของฉันจะแตกต่างกันเล็กน้อย
Solace

รองรับฟังก์ชั่น setContentInsetsAbsolute เฉพาะเมื่อ SDK> 21 วิธีแก้ปัญหาใด ๆ
Pramod J George

11
ต้องเพิ่มparent.setPadding(0, 0, 0, 0);สำหรับแท็บเล็ตเช่นกัน
Alexandre G

47

สิ่งที่ใส่เข้าไปด้านซ้ายเกิดจาก Toolbar contentInsetStartซึ่งโดยค่าเริ่มต้นคือ 16dp

เปลี่ยนสิ่งนี้เพื่อจัดตำแหน่งให้กับ keyline

อัพเดทสำหรับห้องสมุดสนับสนุน v24.0.0:

เพื่อให้ตรงกับข้อกำหนดการออกแบบวัสดุมีแอตทริบิวต์เพิ่มเติมcontentInsetStartWithNavigationซึ่งโดยค่าเริ่มต้นคือ 16dp เปลี่ยนค่านี้หากคุณมีไอคอนการนำทางด้วย

ปรากฎว่านี่เป็นส่วนหนึ่งของข้อกำหนดการออกแบบวัสดุใหม่ที่นำมาใช้ในไลบรารีการออกแบบเวอร์ชัน 24

https://material.google.com/patterns/navigation.html

อย่างไรก็ตามสามารถลบพื้นที่พิเศษได้โดยเพิ่มคุณสมบัติต่อไปนี้ในวิดเจ็ต Toolbar

app:contentInsetStartWithNavigation="0dp"

ก่อน: ป้อนคำอธิบายรูปภาพที่นี่

หลัง: ป้อนคำอธิบายรูปภาพที่นี่


ทางออกนี้เป็นสิ่งที่ทำงานให้ฉันโดยใช้ Android Jetpack (androidx)
Francisc0

27

ฉันพบความละเอียดอื่น ๆ (อ้างอิง appcompat-v7) ที่เปลี่ยนแถบเครื่องมือสไตล์รหัสต่อไปนี้:

<item name="toolbarStyle">@style/Widget.Toolbar</item>


<style name="Widget.Toolbar" parent="@style/Widget.AppCompat.Toolbar">
<item name="contentInsetStart">0dp</item>
</style>

โปรดดูstackoverflow.com/questions/31359608/นี้หากคุณช่วยฉันได้
Prashant Kedia

ฉันจะตรวจสอบและแจ้งให้คุณทราบ
madhu527

14
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
android:paddingLeft="0dp">

มันควรจะดีพอ


11

เพียงปรับเปลี่ยนสไตล์ของคุณ xml

<!-- ActionBar styles -->
    <style name="MyActionBar" parent="Widget.AppCompat.ActionBar">
        <item name="contentInsetStart">0dp</item>
        <item name="contentInsetEnd">0dp</item>
    </style>

8

แทนที่จะเพิ่มแถบเครื่องมือในเค้าโครงคุณสามารถตั้งค่ามุมมองที่กำหนดเองตามที่แสดงด้านล่าง

Toolbar parent = (Toolbar) customView.getParent();
parent.setContentInsetsAbsolute(0,0);

7

เพิ่มapp:contentInsetStart="0dp"ในแถบเครื่องมือเพียงแค่ลบพื้นที่ที่เหลือ

ดังนั้นนิยามแถบเครื่องมือของคุณจะเป็นแบบนี้

 <android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    app:contentInsetStart="0dp"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

และมันก็เป็นแบบนี้

ป้อนคำอธิบายรูปภาพที่นี่


4

ใช้AppCompatAcitivtyคุณสามารถใช้เพียงแค่

Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar);
View logo = getLayoutInflater().inflate(R.layout.custom_toolbar, null);
mToolbar.addView(logo, new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT));
mToolbar.setContentInsetsAbsolute(0,0);

3

คุณต้องเพิ่มบรรทัดนี้ app2: contentInsetStart = "0dp" ในแถบเครื่องมือของคุณ

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app2="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@color/colorPrimary"
    app2:contentInsetStart="0dp"/>

2
สำหรับฉันมันเป็น app:contentInsetStart="0dp"
Adil Soomro

1

ฉันไม่พบวิธีแก้ไขปัญหาของฉัน (ภาพแรก) ที่ใดก็ได้ แต่ในที่สุดฉันก็ลงเอยด้วยวิธีแก้ปัญหาที่ง่ายที่สุดหลังจากขุดไม่กี่ชั่วโมง โปรดทราบว่าฉันได้ลองด้วยคุณสมบัติ xml มากมายเช่นapp:setInsetLeft="0dp"ฯลฯ แต่ก็ไม่มีสิ่งใดที่ช่วยในกรณีนี้

ภาพที่ 1 ป้อนคำอธิบายรูปภาพที่นี่

รหัสต่อไปนี้แก้ไขปัญหานี้ในรูปที่ 2

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    setContentView(R.layout.activity_main);

    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);


    //NOTE THAT: THE PART SOLVED THE PROBLEM.
    android.support.design.widget.AppBarLayout abl = (AppBarLayout)
            findViewById(R.id.app_bar_main_app_bar_layout);

    abl.setPadding(0,0,0,0);
}

ภาพที่ 2

ป้อนคำอธิบายรูปภาพที่นี่


1

การตั้งค่าแอตทริบิวต์ "contentInset ... " เป็น 0 ใน Toolbar ไม่ทำงานสำหรับฉัน โซลูชันของ Nilesh Senta เพื่ออัปเดตสไตล์ที่ใช้งานได้!

styles.xml

<style name="AppTheme" parent="Theme.AppCompat.Light">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="actionBarStyle">@style/Actionbar</item>
    <item name="android:titleTextStyle">@style/ActionbarTitle</item>
</style>

<style name="Actionbar" parent="Widget.AppCompat.ActionBar">
    <item name="contentInsetStart">0dp</item>
    <item name="contentInsetEnd">0dp</item>
</style>

java (onCreate)

ActionBar actionBar =  getSupportActionBar();

actionBar.setDisplayShowTitleEnabled(false);
actionBar.setDisplayHomeAsUpEnabled(false);
actionBar.setDisplayUseLogoEnabled(false);
actionBar.setDisplayShowCustomEnabled(true);

ActionBar.LayoutParams layoutParams = new ActionBar.LayoutParams(
            ActionBar.LayoutParams.MATCH_PARENT,
            ActionBar.LayoutParams.MATCH_PARENT
    );

View view = LayoutInflater.from(this).inflate(R.layout.actionbar_main, null);

actionBar.setCustomView(view, layoutParams);

0

สร้างแถบเครื่องมือเช่นนี้

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/menuToolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:background="@color/white"
android:contentInsetLeft="10dp"
android:contentInsetRight="10dp"
android:contentInsetStart="10dp"
android:minHeight="?attr/actionBarSize"
android:padding="0dp"
app:contentInsetLeft="10dp"
app:contentInsetRight="10dp"
app:contentInsetStart="10dp"></android.support.v7.widget.Toolbar>

โปรดไปที่ลิงก์นี้เพื่อดูเพิ่มเติม - เคล็ดลับ Android


0

เพิ่มandroid:padding="0dp"งานให้ฉันเท่านั้น

<android.support.v7.widget.Toolbar
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:padding="0dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

0
ActionBar ab = getSupportActionBar();
ab.setDisplayShowHomeEnabled(true);
      ab.setDisplayShowCustomEnabled(true);
      setDisplayShowTitleEnabled(true);
      View customView =     getLayoutInflater().inflate(R.layout.activity_main,null); //here activity_main.xml is the GUI design file.
ab.setCustomView(customView);
Toolbar parent =(Toolbar) customView.getParent(); //use V7 Toolbar import
parent.setContentInsetsAbsolute(0, 0);
setPadding(5,0,0,0);

ab.setIcon(R.mipmap.ic_launcher);

0

คุณสามารถใช้โครงร่างที่สัมพันธ์กันภายในกลุ่มมุมมองแถบเครื่องมือในไฟล์ xml ของคุณและปรับตำแหน่งของวิดเจ็ตตามที่คุณต้องการสำหรับกรณีการใช้งานของคุณไม่จำเป็นต้องสร้างเค้าโครงที่กำหนดเอง & ขยายมันและแนบกับแถบเครื่องมือ เมื่อเสร็จแล้วในรหัสจาวาของคุณใช้ setContentInsetsAbsolute (0,0) กับวัตถุแถบเครื่องมือของคุณก่อนที่จะตั้งเป็นแถบการกระทำการสนับสนุนในรูปแบบของคุณ


0

มันจะเป็นการดีกว่าถ้าคุณจะเพิ่มไอเท็มพื้นหลังลงในสไตล์ของแอคชั่นบาร์เพื่อให้สอดคล้องกับสีพื้นหลังของแอคชั่นที่กำหนดเอง:

<item name="android:background">@color/actionbar_bgcolor</item>

หลังจากใช้ Android 6.0 แถบเครื่องมือจะมีพื้นที่ว่างด้านขวาและไม่สามารถตั้งค่าได้ เพิ่มการปรับระยะขอบด้านขวาในกิจกรรมเช่นนี้: ( มุมมองคือแถบการกระทำที่กำหนดเองหรือปุ่มขวา)

int rightMargin = Build.VERSION.SDK_INT>=Build.VERSION_CODES.M ? 0 : 8; // may the same with actionbar leftMargin in px
ViewGroup.MarginLayoutParams p = (ViewGroup.MarginLayoutParams) view.getLayoutParams();
p.setMargins(p.leftMargin, p.topMargin, rightMargin, p.bottomMargin);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1){
    p.setMarginEnd(rightMargin);
}
view.setLayoutParams(p);

การทำงานร่วมกันของ actionbar นั้นรองรับเฉพาะแอพ Android 3.0+ หากเราใช้แถบเครื่องมือ (ของการสนับสนุน lib v7) แทนเราควรจัดวางในแต่ละ xml ของแต่ละกิจกรรมและดูแลปัญหาการทับซ้อนกับแถบสถานะของระบบในอุปกรณ์ Android 5.0 หรือใหม่กว่า


0

Kotlin

    supportActionBar?.displayOptions = ActionBar.DISPLAY_SHOW_CUSTOM;
    supportActionBar?.setCustomView(R.layout.actionbar);

    val parent = supportActionBar?.customView?.parent as Toolbar
    parent?.setPadding(0, 0, 0, 0)//for tab otherwise give space in tab
    parent?.setContentInsetsAbsolute(0, 0)


0

หากคุณตรวจสอบเอกสารประกอบของแถบเครื่องมือโดยค่าเริ่มต้นจะมีการกำหนดสไตล์และมีรายการเนื้อหาInsetStart

<item name="contentInsetStart">16dp</item>

หากคุณต้องการแทนที่ช่องว่างภายในนี้ก็สามารถทำได้สองวิธี

1. ยกเลิกสไตล์และเพิ่มสไตล์ของคุณเองด้วยค่า contentInsetStart และ contentInsetEnd

<style name="MyActionBar" parent="Widget.AppCompat.ActionBar">
    <item name="contentInsetStart">0dp</item>
    <item name="contentInsetEnd">0dp</item>
</style>

2. ใน XML คุณสามารถกำหนดค่า contentInsetStart และ contentInsetEnd โดยตรง

<androidx.appcompat.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    app:contentInsetLeft="0dp"
    app:contentInsetStart="0dp"
    android:layout_height="?attr/actionBarSize">

    <!--Add your views here-->

</androidx.appcompat.widget.Toolbar>

-1

แอพของคุณรองรับ android 5 หรือไม่ หากไม่รองรับคุณสามารถดาวน์เกรดการสนับสนุน actionbar v7 ได้ ดูเหมือนว่า:

รวบรวม 'com.android.support:appcompat-v7:19.0.+' (อย่าใช้ v7: 21+)

ยังทำให้แอปพลิเคชันรุ่นเป้าหมายน้อยกว่า 21

targetSdkVersion 14

หากแอปของคุณรองรับ android 5 -> คุณจะต้องใช้แถบเครื่องมือแบบกำหนดเอง (กลายเป็น appcombat-v7: 21 มีการเปลี่ยนแปลงบางอย่าง)

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.