グラデーションと矢印を使用した水平スクロールの作成

左右にスクロールする水平ブロックを作成する方法を説明します。 どの矢印が端で消えますか（最後に達したとき）。 そして、それはグラデーション塗りつぶしを持っています。

小さな紹介

少し前まで、Android for PHPでJavaを使ってプログラミングをやり直さなければなりませんでした（それ以前、約5歳で、Javaはほとんどそれをしていませんでした）。 職場では、アプリケーションを作成する必要がありました。 当然、いくつかの要素を作成するには、 http：//stackoverflow.com/および他のサイト（公式ドキュメントを含む）にアクセスする必要がありましたが、奇妙なことに、必要な要素の説明がなく、それらを最初から記述する（または他の機能の一部を使用する）必要があります。

何をする必要がありますか

デザインには、一見シンプルな外観の要素がありました。

クエストの開始

最初に、この要素は非常に簡単に作成できると判断しました。 しかし、私はいくつかの問題に遭遇しました。

1.勾配

2. #rrggbbから色を変換します

3.背景からインターネットから画像をダウンロードする

4.左右のボタン

5.水平スクロールでテキストフィールドを動的に作成する

最も簡単なグラデーションから始めましょう

XMLでグラデーションを作成する方法に関する膨大な資料を見つけましたが、私のタスクは、グラデーションがセクションごとに変わるようにすることでした。 ここでコードが見つかりました ：

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(); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この関数は文字列をintに変換し、結果の数値を返します。

色を見つけました。 それでは、それを理解しましょう。

背景からインターネットから画像をダウンロードする

長い検索の後、私に最も適した関数がここで見つかりました ：

  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（）の後に呼び出されることに注意してください

たぶん私はそれを不注意に読んだかもしれませんが、私はそれを見つけられず、非常に長い間、私はスクロールが私が望むように機能しない理由に苦しみました。



これで、グラデーションの作成、色の変換、インターネット図面からのDrawableの作成、スクロールおよびレンダリング時のボタンの非表示の方法がわかりました。 すべての知識を1つにまとめ、ボタンを動的に追加するだけです。



そして、いつものように落とし穴がなければ、すべてが非常に簡単でした。

水平スクロールでテキストフィールドを動的に作成する

完成したプロジェクトからコピーして、申し訳ありませんが、コードを分割して提供します。



まず、通常のグラデーションを使用するために少し変換を行います。

  <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); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

それだけです 水平スクロールの準備ができました。



コメントは大歓迎です。プログラムはまだ開発中です。



UPD 1.インターネットからのグラデーション画像





UPD2。コードを修正しました。それについて書いてくれてありがとうpajamec 。