2014-04-09 5 views
6

मैं इस छवि की तरह लग रहे करने के लिए एक Android टैब दृश्य बनाना चाहते हैं: 3d tab bar3 डी लुक पाने के लिए मैं एंड्रॉइड टैब कैसे स्टाइल कर सकता हूं?

मुझे लगता है कि वहाँ रोम के लिए कई तरीके हैं, लेकिन मुझे लगता है कि मैं अभी भी आदर्श एक नहीं मिली है। मेरा विचार एक विभक्त और सक्रिय विभाजक को काटना था और उन्हें बटन के बीच रखना था। हालांकि, मुझे नहीं पता कि यह इतना अच्छा समाधान होगा क्योंकि मुझे अभी भी पहले और आखिरी बटन के लिए अलग स्टाइल की आवश्यकता होगी। मेरे पास पहले से ही (ग्रे) कंटेनर के लिए 9 पैच है।

मैंने लाल बार के लिए लाल 9 पैच बनाने और बस चुने गए बटन की शैली के बारे में भी सोचा है। इस समाधान के साथ समस्या यह है कि मुझे अभी भी बटनों की संख्या के अनुसार शीर्ष विकर्ण सफेद रेखाएं रखना होगा।

क्या किसी के पास मेरे लिए बेहतर समाधान है?

उत्तर

4

यहां एक और तरीका है: हेडर को टैब से अलग करने के लिए। थोड़ा जटिल, हां, लेकिन लाभ हैं:

  1. यह आपको सामान्य टैब शैली को परिभाषित करने की अनुमति देता है;
  2. किसी भी बटन का समर्थन करता है।

Layout

इस तस्वीर बटन, अलग चौड़ाई के हैं तो वास्तव में एक अतिरिक्त ImageView हैडर के बाईं ओर की जरूरत हो सकती पर।

आइए लाइटररआउट के रूप में हमारे हेडर व्यू को बनाएं। हम ऊपरी डिवाइडर और खिंचाव के अंतराल को उसी layout_weight के साथ रख सकते हैं। ,

R.drawable.header_divider

मुझे व्यक्तिगत रूप से करने के लिए के लिए अलग पृष्ठभूमि बनाने:

R.drawable.header_bg

और R.drawable.header_divider एक सरल (वैकल्पिक पारदर्शी) बिटमैप है:

public class HeaderLayout extends LinearLayout { 

    public HeaderLayout(Context context) { 
     super(context); 
     initView(); 
    } 

    public HeaderLayout(Context context, AttributeSet attrs) { 
     super(context, attrs); 
     initView(); 
    } 

    public void setNumberOfColumns(int number) { 
     removeAllViews(); 
     for (int i = 0; i < number; i++) { 
      addView(getColumnView(), getColumnLayoutParams()); 
      // We don't need a divider after the last item 
      if (i < number - 1) { 
       addView(getDividerView(), getDividerLayoutParams()); 
      } 
     } 
    } 

    private void initView() { 
     setBackgroundResource(R.drawable.header_bg); 
    } 

    private View getColumnView() { 
     return new View(getContext()); 
    } 

    private View getDividerView() { 
     ImageView dividerView = new ImageView(getContext()); 
     dividerView.setImageResource(R.drawable.header_divider); 
     dividerView.setScaleType(ImageView.ScaleType.FIT_XY); 
     return dividerView; 
    } 

    private LayoutParams getColumnLayoutParams() { 
     return new LayoutParams(0, LayoutParams.MATCH_PARENT, 1.0f); 
    } 

    private LayoutParams getDividerLayoutParams() { 
     return new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.MATCH_PARENT); 
    } 

} 

कहाँ R.drawable.header_bg एक 9patch है पहला और अंतिम बटन कम से कम कठिन समाधान है, लेकिन यह वास्तविक कार्य पर निर्भर करता है।

संबंधित मुद्दे