Android: BOTTOM में टैब


148

मैंने इस बारे में कुछ बकवास देखी है, लेकिन कुछ भी निश्चित नहीं है। क्या टैब को स्क्रीन के निचले भाग में टैब में रखने का कोई तरीका है? यदि हां, तो कैसे?

मैंने निम्नलिखित कोशिश की है, लेकिन काम नहीं किया:

ए) फ्रैमलैटआउट
बी के नीचे टैबवीगेट सेट करना) टैबविजेट के गुरुत्वाकर्षण को "नीचे" पर सेट करना

धन्यवाद! llappall


10
कृपया परिभाषित करें "काम नहीं किया"।
कॉमन्सवेयर

मैं नीचे की साइट से एक का उपयोग करता हूं। यह http://kpbird.blogspot.com/2011/05/androidbottom-tabbar-control.html
Juliousraj

3
अगर आप iPhone को टैब होस्ट की तरह चाहते हैं तो यहां देखें
आदिल सूमो

जवाबों:


272

यहां स्क्रीन के निचले भाग में टैब प्राप्त करने का सबसे सरल, सबसे मजबूत और स्केलेबल समाधान है।

  1. अपने वर्टिकल लिनेरलआउट में, TabWidget के ऊपर FrameLayout लगाएं
  2. सेट layout_heightकरने के लिए wrap_contentदोनों FrameLayout और TabWidget पर
  3. फ़्रेमलैटआउट सेट करें android:layout_weight="1"
  4. TabWidget सेट करें android:layout_weight="0"(0 डिफ़ॉल्ट है, लेकिन जोर, पठनीयता, आदि के लिए)
  5. TabWidget सेट करें android:layout_marginBottom="-4dp"(नीचे डिवाइडर को हटाने के लिए)

पूर्ण कोड:

<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/tabhost"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:padding="5dp">

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:padding="5dp"
            android:layout_weight="1"/>

        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="0"
            android:layout_marginBottom="-4dp"/>

    </LinearLayout>

</TabHost>

3
डिवाइडर वास्तव में हार्ड कोडित है। मैं टैब के लिए उपयोग किए जाने वाले ड्रॉबल्स को बदलने की कोशिश कर रहा था और इसे पाया। कुल बम्मर।
जेरेमी लोगन

6
आपको स्वीकृत उत्तर के रूप में इसका (या कुछ) चयन करना चाहिए।
जेडीपोटी

4
Google के मानक TabWidget उदाहरण से यहां केवल आवश्यक विचलन फ्रेमलेयआउट layout_weight=1पर सेट हो रहा है। यह टैब नियंत्रण को पहले LinearLayout से इसकी ऊंचाई "दावा" करने की अनुमति देता है।
निक फारिना

19
TabWidget के तल पर विभक्त से छुटकारा पाने के लिए, बस TabWidget में जोड़ें android:layout_marginBottom="-5px"। यह स्क्रीन के निचले हिस्से को 5 पिक्सेल से टैबविजेट ले जाएगा, बस इतना कि आप विभक्त को न देखें। फ्रेम-आउट आकार में भरपाई करेगा इसलिए यह पूरी तरह से काम करता है। मुझे यकीन नहीं है कि डिवाइडर का आकार बड़े उपकरणों पर बदलता है या नहीं। dpइसके बदले आपको उपयोग करना पड़ सकता है px
जेक विल्सन

1
मैंने उत्तर में रिमूवर-डिवाइडर टिप्पणी को शामिल किया है।
Arne Evertsson

38

इसे आज़माएं;) बस फ़्रेमलेआउट की सामग्री (@ आईडी / टैब कॉन्टेंट) देखें, क्योंकि मुझे नहीं पता कि स्क्रॉल करने के मामले में यह कैसे काम करेगा ... मेरे मामले में यह काम करता है क्योंकि मैंने अपने टैब की सामग्री के रूप में सूची दृश्य का उपयोग किया था । :) आशा करता हूँ की ये काम करेगा।

<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/tabhost"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <RelativeLayout 
        android:layout_width="fill_parent" 
        android:layout_height="fill_parent">
        <FrameLayout android:id="@android:id/tabcontent"
             android:layout_width="fill_parent" 
             android:layout_height="fill_parent"
             android:layout_alignParentTop="true" 
             android:layout_above="@android:id/tabs" />
    <TabWidget android:id="@android:id/tabs"
             android:layout_width="fill_parent" 
             android:layout_height="wrap_content"
             android:layout_alignParentBottom="true" />
    </RelativeLayout>
</TabHost>

4
+1 लेकिन क्या आपने स्क्रीन के ऊपर काली / ग्रे पट्टी देखी है? आपने इसे कैसे हटाया?
आह्म्र

मैं फॉर्म के बाईं ओर टैब विजेट पोस्ट करने के लिए इसका उपयोग कर रहा हूं।
mr.j05hua

12

लाइन हटाने का एक तरीका है।

1) इस ट्यूटोरियल का पालन करें: एंड्रॉइड-टैब्स-विद-फ्रेगमेंट

2) फिर RelativeLayout परिवर्तन लागू करें जो Leaudro ने ऊपर सुझाया था (सभी फ़्रेमलैयूट में लेआउट प्रॉप्स लागू करें)।

आप आइटम # 1 में tab.xml में एक ImageView भी जोड़ सकते हैं और टैब की तरह एक बहुत ही iPhone पा सकते हैं।

यहाँ एक स्क्रीनशॉट है जो मैं अभी काम कर रहा हूँ। मुझे अभी भी कुछ काम करना है, मुख्य रूप से आइकन के लिए चयनकर्ता बनाना और समान क्षैतिज वितरण सुनिश्चित करना है, लेकिन आपको यह विचार मिलता है। मेरे मामले में, मैं टुकड़ों का उपयोग कर रहा हूं, लेकिन समान प्रिंसिपलों को एक मानक टैब दृश्य पर लागू होना चाहिए।

यहाँ छवि विवरण दर्ज करें


जब आप इसे पोस्ट करते हैं, तो यह कुछ समय का है, लेकिन आपका लिंक अब nginx में आपका स्वागत है! और पेज पर और कुछ नहीं है।
DroidDev

1
यह मेरी साइट नहीं थी, सो मुझे दुर्भाग्य से इस पर नियंत्रण नहीं है। इस समय के बाद हालांकि, सिस्टम में काफी बदलाव आया है कि आप अपने एंड्रॉइड उपयोगकर्ताओं के लिए इस तरह के इंटरफ़ेस को लागू करने की संभावना नहीं रखते हैं, वे अपेक्षा करते हैं कि चीजें अब थोड़ी अलग तरह से काम करेंगी।
ब्रिल पप्पिन 16

3

यह निश्चित नहीं है कि यह एंड्रॉइड के सभी संस्करणों के लिए काम करेगा (विशेष रूप से कस्टम यूआई सामान के साथ), लेकिन मैं नीचे जोड़कर ग्रे बार को हटाने में सक्षम था

 android:layout_marginBottom="-3dp"

TabWidget XML के लिए ...


3

आप सभी के लिए जो टैबविदग की अलग लाइन को हटाने की कोशिश करते हैं, यहाँ एक उदाहरण प्रोजेक्ट (और इसका संबंधित ट्यूटोरियल) है, जो टैब को कस्टमाइज़ करने के लिए बहुत अच्छा काम करता है और इस प्रकार टैब के नीचे होने पर समस्याओं को दूर करता है। ग्रहण परियोजना: Android- कस्टम-टैब ; मूल स्पष्टीकरण: ब्लॉग ; आशा है कि इससे मदद मिली।



3
<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/tabhost"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical" >

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="0dip"
            android:layout_weight="1" />

        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="0"
            android:background="#252a31"
            android:tabStripEnabled="false" >
        </TabWidget>
    </LinearLayout>

</TabHost>

1

यह बिल्कुल वैसा नहीं हो सकता है जैसा आप देख रहे हैं (यह आपके टैब को स्क्रीन के निचले हिस्से में भेजने के लिए "आसान" समाधान नहीं है) लेकिन फिर भी एक दिलचस्प वैकल्पिक समाधान है जो मैं आपको फ़्लैग करना चाहूंगा:

ScrollableTabHost TabHost की तरह व्यवहार करने के लिए डिज़ाइन किया गया है, लेकिन एक अतिरिक्त scrollview के साथ और अधिक आइटम फिट करने के लिए ...

शायद इस ओपन-सोर्स प्रोजेक्ट में खुदाई करने पर आपको अपने प्रश्न का उत्तर मिल जाएगा। अगर मुझे कुछ आसान लगता है तो मैं आपके पास वापस आऊंगा।


1

जब मुझे स्क्रीन के निचले भाग पर रखने की कोशिश की जा रही थी, तो मुझे एंड्रॉइड टैब के साथ यही समस्या थी। मेरा परिदृश्य एक लेआउट फ़ाइल का उपयोग नहीं करना था और कोड में टैब बनाना था, मैं प्रत्येक टैब से गतिविधियों को फायर करना भी चाह रहा था जो कि अन्य दृष्टिकोणों का उपयोग करके थोड़ा जटिल लग रहा था, इसलिए समस्या को दूर करने के लिए यहां नमूना कोड है:

जोड़ने-टैब-इन-एंड्रॉयड और रखने-उन्हें


1

हां, देखें: लिंक , लेकिन उसने नए टैब बनाने के लिए गतिविधियों का नहीं, बल्कि xml लेआउट का उपयोग किया, इसलिए अपना xml कोड (फ़्रेमलैटआउट के लिए सेट करें पेडिंगटॉप - 0px) डालें और फिर कोड लिखें:

public class SomeActivity extends ActivityGroup {

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
  setContentView(R.layout.main);

    TabHost tab_host = (TabHost) findViewById(R.id.edit_item_tab_host); 

    tab_host.setup(this.getLocalActivityManager());

    TabSpec ts1 = tab_host.newTabSpec("TAB_DATE"); 
    ts1.setIndicator("tab1"); 
    ts1.setContent(new Intent(this, Registration.class)); 
    tab_host.addTab(ts1); 

    TabSpec ts2 = tab_host.newTabSpec("TAB_GEO"); 
    ts2.setIndicator("tab2"); 
    ts2.setContent(new Intent(this, Login.class)); 
    tab_host.addTab(ts2); 

    TabSpec ts3 = tab_host.newTabSpec("TAB_TEXT"); 
    ts3.setIndicator("tab3"); 
    ts3.setContent(new Intent(this, Registration.class)); 
    tab_host.addTab(ts3); 

    tab_host.setCurrentTab(0);      


}

}


0

मैं इस कोड का उपयोग स्थिर काम के लिए करता हूं, यह टैब में नेस्टेड टुकड़ों के लिए अनुकूलित है (उदाहरण के लिए नेस्टेड मैपफ्रेगमेंट) और "गतिविधियों को न रखें" पर परीक्षण किया गया: https://stackoverflow.com/a/23150258/2765497

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.