मैं एंड्रॉइड में गोल कोनों के साथ एक सूची दृश्य कैसे बना सकता हूं?


176

मैं एंड्रॉइड में गोल कोनों के साथ एक सूची दृश्य कैसे बना सकता हूं?


यह प्रश्न वास्तव में उपयोगी है, इसलिए आपका उत्तर है .. !!
सजाद कारुथेदनाथ

जवाबों:


371

यह करने का एक तरीका है (हालांकि Android प्रलेखन के लिए धन्यवाद!):

निम्नलिखित को एक फ़ाइल में जोड़ें (कहिए customshape.xml) और फिर इसे (Res / drawable / customshape.xml) में रखें

<?xml version="1.0" encoding="UTF-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
     android:shape="rectangle"> 
     <gradient 
         android:startColor="#SomeGradientBeginColor"
         android:endColor="#SomeGradientEndColor" 
         android:angle="270"/> 

    <corners 
         android:bottomRightRadius="7dp" 
         android:bottomLeftRadius="7dp" 
         android:topLeftRadius="7dp" 
         android:topRightRadius="7dp"/> 
</shape> 

एक बार जब आप इस फ़ाइल को बनाने के साथ हो जाते हैं, तो पृष्ठभूमि को निम्न तरीकों में से एक में सेट करें:

कोड के माध्यम से: listView.setBackgroundResource(R.drawable.customshape);

XML के माध्यम से , केवल कंटेनर में निम्न विशेषता जोड़ें (उदा: रैखिकरण या किसी भी फ़ील्ड में))

android:background="@drawable/customshape"

आशा है कि कोई इसे उपयोगी पाता है ...


2
उत्कृष्ट टिप के लिए धन्यवाद। सिर्फ FYI, कॉपी-पेस्टिंग ने मुझे एक रनटाइम अपवाद कहा, "XmlPullParserException: बाइनरी एक्सएमएल फाइल लाइन # 4 <ग्रेडिएंट> टैग को 45 के गुणक होने के लिए 'कोण' विशेषता की आवश्यकता होती है .." आसानी से एंगल को 270 में बदल दिया जाता है।
एलाक्लाज़

तय करने के लिए धन्यवाद ... लेकिन मुझे नहीं पता कि ऐसा क्यों हो सकता है .. क्या आपको कोई विशेष कारण मिला?
लीजेंड

@teedyay: किसी भी समय :)
लीजेंड

1
एलक्लाव्स के समान, कोण 45 से अधिक होना चाहिए: "XmlPullParserException: बाइनरी एक्सएमएल फाइल लाइन # 4 <ग्रेडिएंट> टैग को 45 के गुणक होने के लिए 'कोण' विशेषता की आवश्यकता होती है
यूसुफ

29
हालांकि यह चयन-हाइलाइटिंग के साथ अच्छी तरह से काम नहीं करता है: जब शीर्ष या निचले आइटम का चयन किया जाता है, तो यह रंगीन पृष्ठभूमि आयताकार होती है और गोल-कोने वाली पृष्ठभूमि के शीर्ष पर खींची जाती है।
क्रिस वान बाल

56

हालांकि यह काम किया, यह पूरी पृष्ठभूमि रंग के रूप में अच्छी तरह से बाहर ले लिया। मैं बस बॉर्डर करने के लिए रास्ता ढूंढ रहा था और बस उस एक्सएमएल लेआउट कोड को इस एक के साथ बदल दिया और मैं जाने के लिए अच्छा था!

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke android:width="4dp" android:color="#FF00FF00" />
    <padding android:left="7dp" android:top="7dp"
            android:right="7dp" android:bottom="7dp" />
    <corners android:radius="4dp" />
</shape> 

इसके अलावा बाहर की जाँच क्या यह उत्तर
ThomasRS

12

@ क्रिस वैन-bael

उन लोगों के लिए जो शीर्ष और निचले पंक्ति के लिए चयन हाइलाइट करते हैं, जहां पृष्ठभूमि आयत चयन पर दिखाई देती है, आपको चयनकर्ता को पारदर्शी रंग में अपनी सूची के लिए सेट करने की आवश्यकता होती है।

listView.setSelector(R.color.transparent);

Color.xml में बस निम्नलिखित जोड़ें -

<color name="transparent">#00000000</color>

5
यह मेरे लिए काम नहीं किया। हालाँकि, मैंने निम्नलिखित पंक्ति को जोड़ा, और इससे छुटकारा पा लिया:android:cacheColorHint="@android:color/transparent"
सीजर

1
यह निश्चित रूप से मेरे लिए चयन मुद्दा तय किया - धन्यवाद! आप अपने खुद के बनाने के बजाय चयनकर्ता रंग के लिए android.R.color.transparent का उपयोग कर सकते हैं।
greg7gkb

3
प्रोग्राम करने के बजाय, चयन रंग छिपाने के लिए XML लेआउट में इसे अपने ListView में जोड़ें: android: listSelector = "# 00000000"
Elad Nava

@alvins क्या सूची दृश्य आइटम की तरह हाइलाइट करने के लिए लेआउट का चयन करने का कोई तरीका है?
भारत डोडेजा

अगर मैं सूची के लिए एक अपारदर्शी रंग का उपयोग करना चाहता हूं तो मुझे क्या करना चाहिए?
suitianshi

3

अन्य उत्तर बहुत उपयोगी हैं, लेखकों के लिए धन्यवाद!

लेकिन मैं यह नहीं देख पाया कि आयतन को कैसे अनुकूलित किया जा सकता है जब चयन पर किसी आइटम को हाइलाइट करने के बजाय @alvins @bharat dojeha को अक्षम करना हो।

मेरे लिए निम्नलिखित कार्य करता है कि एक गोल आकार के दृश्य कंटेनर को बिना किसी रूपरेखा और एक हल्के भूरे रंग के एक ही आकार के चयन के साथ बनाया जाए:

आपके xml में एक चयनकर्ता शामिल करने की आवश्यकता है जैसे कि (res / drawable / customshape.xml में):

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_pressed="true" >
    <shape xmlns:android="http://schemas.android.com/apk/res/android" >
        <stroke android:width="8dp" android:color="@android:color/transparent" />
        <padding android:left="14dp" android:top="14dp"
                android:right="14dp" android:bottom="14dp" />
        <corners android:radius="10dp" />
        <gradient 
             android:startColor="@android:color/background_light"
             android:endColor="@android:color/transparent" 
             android:angle="225"/> 
    </shape>
</item>
<item android:state_pressed="false">
    <shape xmlns:android="http://schemas.android.com/apk/res/android" >
        <stroke android:width="8dp" android:color="@android:color/transparent" />
        <padding android:left="14dp" android:top="14dp"
                android:right="14dp" android:bottom="14dp" />
        <corners android:radius="10dp" />
        <gradient 
             android:startColor="@android:color/darker_gray"
             android:endColor="@android:color/transparent" 
             android:angle="225"/> 
    </shape>        
</item>

फिर आपको एक सूची एडाप्टर को लागू करने और पृष्ठभूमि के रूप में कस्टम चयनकर्ता को सेट करने के लिए getView विधि को ओवरराइड करने की आवश्यकता है

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        //snip
        convertView.setBackgroundResource(R.drawable.customshape);
        //snip
    }

और onCreate में डिफ़ॉल्ट चयनकर्ता आयत को 'छिपाने' की भी आवश्यकता है (मैं आइटम के बीच अपनी पतली ग्रे डिवाइडर लाइन भी छिपाता हूं):

listView.setSelector(android.R.color.transparent);
listview.setDivider(null);

यह दृष्टिकोण विभिन्न चयन स्थितियों के साथ सिर्फ ListViewItem के लिए ही नहीं, ड्रॉबल्स के लिए एक सामान्य समाधान हल करता है।


3

अपडेट करें

इन दिनों के समाधान CardViewमें निर्मित गोल कोनों के लिए समर्थन के साथ उपयोग करना है।


मूल उत्तर *

एक और तरीका मुझे लगा कि लेआउट के शीर्ष पर एक चित्र बनाकर अपने लेआउट को बाहर निकालना है। यह आपकी मदद कर सकता है। की जाँच करें काटा कोने गोल एंड्रॉयड एक्सएमएल


2

फिर भी चयन का एक और समाधान सूची में पहली और अंतिम वस्तुओं के साथ समस्याओं को उजागर करता है:

अपनी सूची पृष्ठभूमि के ऊपर और नीचे पैडिंग को त्रिज्या के बराबर या उससे अधिक जोड़ें। यह आपके कोने के घटता के साथ ओवरलैप नहीं करता है चयन को सुनिश्चित करता है।

यह सबसे आसान उपाय है जब आपको गैर-पारदर्शी चयन हाइलाइटिंग की आवश्यकता होती है।

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <solid android:color="@color/listbg" />
    <stroke
        android:width="2dip"
        android:color="#D5D5D5" />
    <corners android:radius="10dip" />

    <!-- Make sure bottom and top padding match corner radius -->
    <padding
        android:bottom="10dip"
        android:left="2dip"
        android:right="2dip"
        android:top="10dip" />
</shape>

1

वास्तव में, मुझे लगता है कि इस लिंक पर सबसे अच्छा समाधान वर्णित है:

http://blog.synyx.de/2011/11/android-listview-with-rounded-corners/

संक्षेप में, यह शीर्ष, मध्य और नीचे की वस्तुओं के लिए एक अलग पृष्ठभूमि का उपयोग करता है, ताकि ऊपर और नीचे वाले गोल हो जाएं।


1

यह मेरे लिए अविश्वसनीय रूप से आसान था। यदि आप अपने स्वयं के उपयोग कर रहे हैं तो मैं गोल कोनों को पूरी तरह से उजागर करने के लिए एक और समाधान सुझाना चाहूंगाCustomAdapter

XML फ़ाइलों को परिभाषित करना

सबसे पहले, अपने ड्रॉएबल फोल्डर के अंदर जाएं और 4 अलग-अलग शेप बनाएं:

  • shape_top

    <gradient
        android:startColor="#ffffff"
        android:endColor="#ffffff"
        android:angle="270"/>
    <corners
        android:topLeftRadius="10dp"
        android:topRightRadius="10dp"/>

  • shape_normal

    <gradient
        android:startColor="#ffffff"
        android:endColor="#ffffff"
        android:angle="270"/>
    <corners
        android:topLeftRadius="10dp"
        android:topRightRadius="10dp"/>

  • shape_bottom

    <gradient
        android:startColor="#ffffff"
        android:endColor="#ffffff"
        android:angle="270"/>
    <corners
        android:bottomRightRadius="10dp"
        android:bottomRightRadius="10dp"/>

  • shape_rounded

    <gradient
        android:startColor="#ffffff"
        android:endColor="#ffffff"
        android:angle="270"/>
    <corners
        android:topLeftRadius="10dp"
        android:topRightRadius="10dp"
        android:bottomRightRadius="10dp"
        android:bottomRightRadius="10dp"/>

अब, प्रत्येक आकृति के लिए एक अलग पंक्ति लेआउट बनाएं, अर्थात shape_top:

  • आप इस प्रोग्राम को पृष्ठभूमि को बदलकर भी कर सकते हैं।

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="10dp"
        android:fontFamily="sans-serif-light"
        android:text="TextView"
        android:textSize="22dp" />
    
    <TextView
        android:id="@+id/txtValue1"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:textSize="22dp"
        android:layout_gravity="right|center"
        android:gravity="center|right"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="35dp"
        android:text="Fix"
        android:scaleType="fitEnd" />

और प्रत्येक आकार-सूची के लिए एक चयनकर्ता को परिभाषित करें, अर्थात shape_top:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Selected Item -->

    <item android:state_selected="true"
        android:drawable="@drawable/shape_top" />
    <item android:state_activated="true"
        android:drawable="@drawable/shape_top" />

    <!-- Default Item -->
    <item android:state_selected="false"
        android:drawable="@android:color/transparent" />
</selector>

अपने CustomAdapter बदलें

अंत में, अपने अंदर लेआउट विकल्पों को परिभाषित करें CustomAdapter:

if(position==0)
{
 convertView = mInflater.inflate(R.layout.list_layout_top, null);
}
else
{
 convertView = mInflater.inflate(R.layout.list_layout_normal, null);
}

if(position==getCount()-1)
{
convertView = mInflater.inflate(R.layout.list_layout_bottom, null);
}

if(getCount()==1)
{
convertView = mInflater.inflate(R.layout.list_layout_unique, null);
}

और हो गया!


1

बॉर्डर यू बनाने के लिए ड्रॉबल फोल्डर में सॉलिड और कोनों की प्रॉपर्टी के साथ एक और xml फाइल बनानी होगी और इसे बैकग्राउंड में कॉल करना होगा


0

मैं एक कस्टम दृश्य का उपयोग कर रहा हूं जिसे मैं अन्य लोगों के ऊपर लेआउट करता हूं और यह पृष्ठभूमि के समान रंग में 4 छोटे कोनों को खींचता है। यह काम करता है जो भी दृश्य सामग्री है और अधिक मेमोरी आवंटित नहीं करता है।

public class RoundedCornersView extends View {
    private float mRadius;
    private int mColor = Color.WHITE;
    private Paint mPaint;
    private Path mPath;

    public RoundedCornersView(Context context) {
        super(context);
        init();
    }

    public RoundedCornersView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();

        TypedArray a = context.getTheme().obtainStyledAttributes(
                attrs,
                R.styleable.RoundedCornersView,
                0, 0);

        try {
            setRadius(a.getDimension(R.styleable.RoundedCornersView_radius, 0));
            setColor(a.getColor(R.styleable.RoundedCornersView_cornersColor, Color.WHITE));
        } finally {
            a.recycle();
        }
    }

    private void init() {
        setColor(mColor);
        setRadius(mRadius);
    }

    private void setColor(int color) {
        mColor = color;
        mPaint = new Paint();
        mPaint.setColor(mColor);
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setAntiAlias(true);

        invalidate();
    }

    private void setRadius(float radius) {
        mRadius = radius;
        RectF r = new RectF(0, 0, 2 * mRadius, 2 * mRadius);
        mPath = new Path();
        mPath.moveTo(0,0);
        mPath.lineTo(0, mRadius);
        mPath.arcTo(r, 180, 90);
        mPath.lineTo(0,0);
        invalidate();
    }

    @Override
    protected void onDraw(Canvas canvas) {

        /*Paint paint = new Paint();
        paint.setColor(Color.RED);
        canvas.drawRect(0, 0, mRadius, mRadius, paint);*/

        int w = getWidth();
        int h = getHeight();
        canvas.drawPath(mPath, mPaint);
        canvas.save();
        canvas.translate(w, 0);
        canvas.rotate(90);
        canvas.drawPath(mPath, mPaint);
        canvas.restore();
        canvas.save();
        canvas.translate(w, h);
        canvas.rotate(180);
        canvas.drawPath(mPath, mPaint);
        canvas.restore();
        canvas.translate(0, h);
        canvas.rotate(270);
        canvas.drawPath(mPath, mPaint);
    }
}
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.