एक ढाल और तीर के साथ एक क्षैतिज स्क्रॉल बनाना

मैं आपको बताता हूं कि एक क्षैतिज ब्लॉक कैसे बनाया जाए जो बाएं / दाएं स्क्रॉल करता है। किनारों पर कौन से तीर गायब हो जाते हैं (जब हम अंत तक पहुंच गए)। और जिसमें ग्रेडिएंट फिल है।

छोटा सा परिचय

बहुत समय पहले नहीं, मुझे एंड्रॉइड के लिए PHP के तहत जावा के साथ फिर से प्रोग्रामिंग शुरू करनी थी (इससे पहले, लगभग 5 साल पुरानी, ​​जावा ने लगभग नहीं किया था, ऐसा हुआ)। काम में, मुझे एक एप्लिकेशन बनाने की आवश्यकता थी। स्वाभाविक रूप से, कुछ तत्वों को बनाने के लिए मुझे http://stackoverflow.com/ और कुछ अन्य साइटों (आधिकारिक दस्तावेज़ीकरण सहित) पर जाना चाहिए, लेकिन अजीब तरह से, आवश्यक तत्वों का कोई विवरण नहीं है और आपको उन्हें स्क्रैच से लिखना होगा (या अन्य कार्यात्मकताओं से भागों का उपयोग करना होगा)।

मुझे क्या करने की आवश्यकता है?

डिजाइन में इस तरह के एक सरल, प्रतीत होता है, का एक तत्व था:

खोज की शुरुआत

सबसे पहले मैंने तय किया कि यह तत्व बनाने के लिए बहुत सरल होगा। लेकिन मैं कई समस्याओं में भाग गया।
1. ढाल
2. #rrggbb से रंग बदलें
3. पृष्ठभूमि के लिए इंटरनेट से एक छवि डाउनलोड करना
4. बटन बाएँ और दाएँ
5. गतिशील रूप से एक क्षैतिज स्क्रॉल में पाठ फ़ील्ड बनाना

चलो सबसे आसान के रूप में ढाल के साथ शुरू करते हैं

मुझे एक्सएमएल में ग्रेडिएंट बनाने के तरीके पर भारी मात्रा में सामग्री मिली, लेकिन मेरा काम इतना था कि ग्रेडिएंट एक से दूसरे हिस्से में बदल सकता था। कोड का एक टुकड़ा यहाँ पाया गया था:

int colors[] = { 0xff255779 , 0xff3e7492, 0xffa6c0cd }; GradientDrawable g = new GradientDrawable(GradientDrawable.Orientation.TOP_BOTTOM, colors); setBackgroundDrawable(g); 

यह कोड एक ढाल बनाता है और इसे एक पृष्ठभूमि की तरह भरता है। यह वही है जो मुझे चाहिए था। लेकिन यहां मुझे इस तथ्य का सामना करना पड़ा कि कभी-कभी मुझे न केवल एक ढाल की आवश्यकता होती है, बल्कि पृष्ठभूमि में एक तस्वीर का एक सम्मिलन भी होता है, और चित्र को पूरी तरह से भरने की आवश्यकता होती है।

लेकिन इसके बारे में अधिक नीचे।
सबसे पहले, कलर को #rrggbb से 0xffa6c0cd में कनवर्ट करें।

#Rrggbb से रंग बदलें

इसके लिए, एक फ़ंक्शन लिखा गया था:

  public int getBackgoundColorAsInt(String bgcolor){ try{ int result = new BigInteger(bgcolor.replace("#", "FF"),16).intValue(); return result; }catch(Exception e){ Log.e("Error in switch color from String to int","Can't switch bg color : " + bgcolor); return new BigInteger("FFCCCCCC",16).intValue(); } } 

फ़ंक्शन स्ट्रिंग को इंट में कनवर्ट करता है और हमें परिणामी संख्या देता है।
हमने रंग निकाला। अब इसे समझ लेते हैं।

पृष्ठभूमि के लिए इंटरनेट से छवियों को डाउनलोड करना

एक लंबी खोज के बाद, एक समारोह यहाँ पाया गया जो मुझे सबसे अधिक अनुकूल था:

  public Drawable LoadImageFromWebOperations(String url) { try { InputStream is = (InputStream) new URL(url).getContent(); Drawable d = Drawable.createFromStream(is, "src name"); return d; } catch (Exception e) { Log.e("Error in load image", "Can't load image from url " + url); return null; } } 

सब कुछ आसान और स्पष्ट है।

लेफ्ट और राइट बटन

साइड पार्ट्स (स्क्रॉल के दाएं और बाएं) के लिए XML फ़ाइल बनाने का समय आ गया है
यहां मैं केवल एक टुकड़ा कोड दूंगा, जो मुझे बहुत अंत में मिला। प्रयोगों का एक गुच्छा के बाद।

  <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center_vertical" android:background="#0000ff" android:id="@+id/top_menu_categories_layout" android:layout_weight="1" android:visibility="gone" > <ImageView android:id="@+id/subcategory_left_scroll_img" android:background="@drawable/top_menu_prev_category" android:layout_height="wrap_content" android:layout_width="25dp" android:visibility="invisible" android:layout_weight=".15" /> <com.lid.app.custom_views.SubcategoryScrollView android:id="@+id/HorizontalScrollView01" android:layout_height="fill_parent" android:layout_width="fill_parent" android:layout_weight=".70" > <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="fill_parent" android:gravity="center_vertical" android:background="#0000ff" > </RelativeLayout> </com.lid.app.custom_views.SubcategoryScrollView> <ImageView android:id="@+id/subcategory_right_scroll_img" android:background="@drawable/top_menu_next_category" android:layout_height="wrap_content" android:layout_width="25dp" android:layout_weight=".15" /> </LinearLayout> 

और अब मैं इस प्रश्न का उत्तर दूंगा कि तुरंत उत्पन्न हुआ - मेरे अपने तत्व का उपयोग यहां क्यों किया गया है।

  public class SubcategoryScrollView extends HorizontalScrollView { //   private ImageView left_scroll; //   private ImageView left_scroll; //   private int display_width; public SubcategoryScrollView(Context context) { super(context); } public SubcategoryScrollView(Context context, AttributeSet attrs) { super(context, attrs); } public SubcategoryScrollView(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); } @Override public void onScrollChanged(int l, int t, int oldl, int oldt) { if(l > 0){ if(this.left_scroll.getVisibility() != View.VISIBLE){ this.left_scroll.setVisibility(View.VISIBLE); } }else{ this.left_scroll.setVisibility(View.INVISIBLE); } if (this.getWidth() + l >= this.computeHorizontalScrollRange()) { this.left_scroll.setVisibility(View.INVISIBLE); }else{ this.left_scroll.setVisibility(View.VISIBLE); } super.onScrollChanged(l, t, oldl, oldt); } @Override protected void onDraw (Canvas canvas){ super.onDraw(canvas); if(this.getScrollX() == 0){ if(this.computeHorizontalScrollRange() <= this.display_width){ this.left_scroll.setVisibility(View.INVISIBLE); }else{ this.left_scroll.setVisibility(View.VISIBLE); } } } /** * @param left_scroll the left_scroll to set * @author gron */ public void setleft_scroll(ImageView left_scroll) { this.left_scroll = left_scroll; } /** * @return the left_scroll * @author gron */ public ImageView getleft_scroll() { return left_scroll; } /** * @param left_scroll the left_scroll to set * @author gron */ public void setleft_scroll(ImageView left_scroll) { this.left_scroll = left_scroll; } /** * @return the left_scroll * @author gron */ public ImageView getleft_scroll() { return left_scroll; } /** * @param display_width the display_width to set */ public void setDisplayWidth(int display_width) { this.display_width = display_width; } /** * @return the display_width */ public int getDisplayWidth() { return display_width; } } 

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

ध्यान रखें कि OnDraw () onScrollChanged () के बाद कहा जाता है
शायद मैं इसे अनजाने में पढ़ता हूं, लेकिन मुझे यह नहीं मिला और बहुत लंबे समय तक मुझे सताया गया था कि स्क्रॉल मेरे काम करने के तरीके पर काम नहीं करता है।

अब हम जानते हैं कि कैसे एक ढाल बनाने के लिए, रंग बदलने, एक इंटरनेट ड्राइंग से एक ड्रॉबल बनाने, स्क्रॉल करने और रेंडर करने पर बटन छिपाएं। यह केवल सभी ज्ञानों को एक में संयोजित करने और बटन को गतिशील रूप से जोड़ने के लिए बना हुआ है

और सब कुछ बहुत, बहुत सरल था, अगर, हमेशा की तरह, कोई नुकसान नहीं हुआ।

गतिशील रूप से एक क्षैतिज स्क्रॉल में पाठ फ़ील्ड बनाना

मैं कोड को टुकड़ों में दूंगा, क्षमा करें, समाप्त परियोजना से नकल।

सामान्य रूप से ढाल का उपयोग करने के लिए पहले, हम थोड़ा परिवर्तन करेंगे।

  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_height="fill_parent" android:layout_width="fill_parent" android:id="@+id/main_layout" > <ImageView android:id="@+id/subcategory_background_img" android:layout_width="fill_parent" android:layout_height="41dp" android:scaleType="fitXY" android:visibility="invisible" android:layout_below="@id/top_menu_layout" /> <include layout="@layout/top_menu_subcategories_layout" <----------       2-  android:id="@+id/top_menu_categories_layout" android:layout_width="fill_parent" android:layout_height="41dp" android:layout_below="@id/top_menu_layout" /> </RelativeLayout> 

अब हमारा कोड लिखें:

  final LinearLayout ll = (LinearLayout) this.findViewById(R.id.top_menu_categories_layout); final ImageView background_iv = (ImageView) this.findViewById(R.id.subcategory_background_img); //        LinearLeyout if (remote_url != null) { background_iv.setBackgroundDrawable( //      this.LoadImageFromWebOperations(remote_url) ); background_iv.setVisibility(View.VISIBLE); ll.setBackgroundColor(0); } else { background_iv.setVisibility(View.INVISIBLE); // change color in categories menu int[] colors = new int[2]; colors[0] = current_category.getColors().getBackgoundColorAsInt( color1 ); colors[1] = current_category.getColors().getBackgoundColorAsInt( color2 ); final GradientDrawable gd = new GradientDrawable(GradientDrawable.Orientation.TOP_BOTTOM, colors); ll.setBackgroundDrawable(gd); } final SubcategoryScrollView hs_view = (SubcategoryScrollView) this.findViewById(R.id.HorizontalScrollView01); final ImageView iv = (ImageView) this.findViewById(R.id.top_menu_select_category); final ImageView scroll_left_iv = (ImageView) this.findViewById(R.id.subcategory_left_scroll_img); final ImageView scroll_right_iv = (ImageView) this.findViewById(R.id.subcategory_right_scroll_img); //  HorizontalScroll     . RelativeLayout layout = new RelativeLayout(this); TextView tv_old = new TextView(getApplicationContext()); //     if (subcategories != null) { //    hs_view.setDisplayWidth(getWindowManager().getDefaultDisplay().getWidth()); hs_view.scrollTo(0, 0); hs_view.setHorizontalScrollBarEnabled(false); hs_view.removeAllViews(); hs_view.setleft_scroll(scroll_left_iv); hs_view.setleft_scroll(scroll_right_iv); int i = 1; //    ,         dpi final float left_margin = 5.0f; final float top_margin = 2.0f; final float padding = 8.0f; final float scale = getResources().getDisplayMetrics().density; int m_left = (int) (left_margin * scale + 0.5f); int t_left = (int) (top_margin * scale + 0.5f); int pad = (int) (padding * scale + 0.5f); // Subcategory          . for (Subcategory item : subcategories) { TextView tv = new TextView(this); RelativeLayout.LayoutParams lparams = new RelativeLayout.LayoutParams( RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT ); tv.setText(item.getTitle()); tv.setTextColor(Color.WHITE); //        if (i > 1) { lparams.setMargins(m_left, t_left, 0, 0); } else { lparams.setMargins(0, t_left, 0, 0); } //             if (i > 1) { lparams.addRule(RelativeLayout.RIGHT_OF, tv_old.getId()); } tv.setPadding(pad, pad, pad, pad); tv.setId(i); tv.setLayoutParams(lparams); tv_old = tv; layout.addView(tv, lparams); i++; } //       hs_view.addView(layout); ll.setVisibility(View.VISIBLE); } 

वह सब है। हमारे पास एक क्षैतिज स्क्रॉल तैयार है।

किसी भी टिप्पणी का स्वागत है, कार्यक्रम अभी भी विकास के तहत है।

अद्यतन 1. इंटरनेट से ग्रेडिएंट इमेज


अद्यतन 2. कोड को ठीक किया, इसके बारे में लिखने के लिए धन्यवाद पजामे ।