এমন একটি অনুসন্ধানভিউ তৈরি করা যা উপাদান নকশার দিকনির্দেশগুলির মতো দেখায়


134

আমি বর্তমানে আমার অ্যাপ্লিকেশনটিকে ম্যাটেরিয়াল ডিজাইনে রূপান্তর করতে শিখার প্রক্রিয়াধীন এবং আমি এখনই কিছুটা আটকে রয়েছি stuck আমি সরঞ্জামদণ্ডটি যুক্ত করে পেয়েছি এবং আমার নেভিগেশন ড্রয়ারটি সমস্ত সামগ্রী মুছে ফেলেছি।

আমি এখন একটি প্রসারণযোগ্য অনুসন্ধান তৈরি করার চেষ্টা করছি যা বৈজ্ঞানিক নির্দেশিকাগুলির মতো দেখাচ্ছে : এখানে চিত্র বর্ণনা লিখুন

এটি এখনই পেয়েছি এবং কীভাবে এটি উপরের মতো তৈরি করব তা আমি বুঝতে পারি না:
আমার সন্ধান

এটি আমার মেনু এক্সএমএল:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/action_search"
        android:icon="@android:drawable/ic_menu_search"
        android:title="Search"
        app:showAsAction="always"
        app:actionViewClass="android.support.v7.widget.SearchView" />
</menu>

এটি কাজ করে, আমি একটি মেনু আইটেম পাই যা অনুসন্ধান ভিউতে প্রসারিত হয় এবং আমি আমার তালিকাটি সূক্ষ্মভাবে ফিল্টার করতে পারি। যদিও এটি 1 ম ছবির মতো কিছু দেখাচ্ছে না।

আমি ব্যবহার করার চেষ্টা MenuItemCompat.setOnActionExpandListener()উপর R.id.action_searchতাই আমি ফিরে তীর হোম আইকন পরিবর্তন হতে পারে, কিন্তু যে কাজ বলে মনে হচ্ছে না। শ্রোতার মধ্যে কিছুই বরখাস্ত হয় না। এমনকি যদি এটি কাজ করে তবে এখনও এটি 1 ম চিত্রের খুব কাছাকাছি হবে না।

আমি কীভাবে নতুন অ্যাপকম্প্যাট সরঞ্জামদণ্ডে একটি অনুসন্ধান ভিউ তৈরি করব যা সামগ্রীর নির্দেশিকাগুলির মতো দেখায়?


6
অ্যাপ: showAsAction = "সবসময় | collapseActionView"
Pavlos

: আপনি এখানে আমার উত্তর কটাক্ষপাত করা করতে চাইবেন stackoverflow.com/a/41013994/5326551
shnizlon

উত্তর:


152

এটি করা খুব সহজ কাজ, যদি আপনি android.support.v7লাইব্রেরি ব্যবহার করেন ।

ধাপ 1

একটি মেনু আইটেম ঘোষণা করুন

<item android:id="@+id/action_search"
    android:title="Search"
    android:icon="@drawable/abc_ic_search_api_mtrl_alpha"
    app:showAsAction="ifRoom|collapseActionView"
    app:actionViewClass="android.support.v7.widget.SearchView" />

ধাপ ২

অনুসন্ধান ভিউ সেট আপ করুন AppCompatActivityএবং onCreateOptionsMenuসেট আপ করুন।

import android.support.v7.widget.SearchView;

...

public class YourActivity extends AppCompatActivity {

    ...

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_home, menu);
        // Retrieve the SearchView and plug it into SearchManager
        final SearchView searchView = (SearchView) MenuItemCompat.getActionView(menu.findItem(R.id.action_search));
        SearchManager searchManager = (SearchManager) getSystemService(SEARCH_SERVICE);
        searchView.setSearchableInfo(searchManager.getSearchableInfo(getComponentName()));
        return true;
    }

    ... 

}

ফলাফল

এখানে চিত্র বর্ণনা লিখুন

এখানে চিত্র বর্ণনা লিখুন


2
আমি এটি upvated ছিল, কিন্তু আপনি কোন এমুলেটর ব্যবহার করছেন? আমি চেষ্টা করেছি কিন্তু আমি navigate-backবোতামটি পাচ্ছি না , বরং একটি অনুসন্ধান আইকন পেয়েছি এবং স্ক্রিনের বাম প্রান্ত থেকে এর দূরত্ব Xআইকন এবং পর্দার ডান প্রান্তের সাথে একই নয় (আমার কাছে নেই ক্রিয়া ওভারফ্লো)। প্রশ্নটি এখানে পোস্ট করেছেন , আপনি কি এটি দেখতে পারেন?
স্বস্তি

13
এটি কোনও উপাদান অনুসন্ধান নয়। এটি কেবল অ্যাকশন বারে পুরানো অনুসন্ধান
গোপাল সিং সিরভি

2
আমি নিজের সাব-প্রশ্নের উত্তর দিয়েছি, অনুসন্ধান বোতামে ক্লিক না করে এটিকে সর্বদা দৃশ্যমান searchView.setIconifiedByDefault(false);করতে onCreateOptionsMenuফাংশনে লাইন যুক্ত করুন ।
adelriosantiago

3
আরেকটি দরকারী টিডবিট - আপনি যদি অনুসন্ধানের দৃষ্টিভঙ্গি প্রসারিত করতে চান তবে প্রাথমিকভাবে আপনার কাছে নিশ্চিত হয়ে নিন app:showAsAction="always"এবং নাapp:showAsAction="ifRoom|collapseActionView"
বিনয় ডব্লু

1
এছাড়াও, এই পদ্ধতিটি ব্যবহার করে সার্চবার ওভারফ্লো আইকনটি প্রসারিত করার পরেও দৃশ্যমান (যেমন, 3-বিন্দু)। তবে কিছু অ্যাপ্লিকেশন, অনুসন্ধানটিকে পুরোপুরি প্রসারিত করে এবং পটভূমিটিকে সাদা রঙে পরিবর্তন করে পরিচালনা করে। GMail এর মতো
জেন

83

এক সপ্তাহ পরে এই নিয়ে চমকপ্রদ। আমি মনে করি আমি এটি বের করে ফেলেছি।
আমি এখন সরঞ্জামদণ্ডের ভিতরে কেবল একটি সম্পাদনা পাঠ্য ব্যবহার করছি। এটি আমার কাছে reddit এ oj88 দ্বারা পরামর্শ দেওয়া হয়েছিল।

আমার এখন এটি রয়েছে:
নতুন অনুসন্ধান ভিউ

আমার ক্রিয়াকলাপের প্রথমে অনক্রিট () এর ভিতরে আমি ডানদিকে ইমেজ ভিউটি দিয়ে এডিট টেক্সটটি এইভাবে টুলবারে যুক্ত করেছি:

    // Setup search container view
    searchContainer = new LinearLayout(this);
    Toolbar.LayoutParams containerParams = new Toolbar.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
    containerParams.gravity = Gravity.CENTER_VERTICAL;
    searchContainer.setLayoutParams(containerParams);

    // Setup search view
    toolbarSearchView = new EditText(this);
    // Set width / height / gravity
    int[] textSizeAttr = new int[]{android.R.attr.actionBarSize};
    int indexOfAttrTextSize = 0;
    TypedArray a = obtainStyledAttributes(new TypedValue().data, textSizeAttr);
    int actionBarHeight = a.getDimensionPixelSize(indexOfAttrTextSize, -1);
    a.recycle();
    LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(0, actionBarHeight);
    params.gravity = Gravity.CENTER_VERTICAL;
    params.weight = 1;
    toolbarSearchView.setLayoutParams(params);

    // Setup display
    toolbarSearchView.setBackgroundColor(Color.TRANSPARENT);
    toolbarSearchView.setPadding(2, 0, 0, 0);
    toolbarSearchView.setTextColor(Color.WHITE);
    toolbarSearchView.setGravity(Gravity.CENTER_VERTICAL);
    toolbarSearchView.setSingleLine(true);
    toolbarSearchView.setImeActionLabel("Search", EditorInfo.IME_ACTION_UNSPECIFIED);
    toolbarSearchView.setHint("Search");
    toolbarSearchView.setHintTextColor(Color.parseColor("#b3ffffff"));
    try {
        // Set cursor colour to white
        // https://stackoverflow.com/a/26544231/1692770
        // https://github.com/android/platform_frameworks_base/blob/kitkat-release/core/java/android/widget/TextView.java#L562-564
        Field f = TextView.class.getDeclaredField("mCursorDrawableRes");
        f.setAccessible(true);
        f.set(toolbarSearchView, R.drawable.edittext_whitecursor);
    } catch (Exception ignored) {
    }

    // Search text changed listener
    toolbarSearchView.addTextChangedListener(new TextWatcher() {
        @Override
        public void beforeTextChanged(CharSequence s, int start, int count, int after) {
        }

        @Override
        public void onTextChanged(CharSequence s, int start, int before, int count) {
            Fragment mainFragment = getFragmentManager().findFragmentById(R.id.container);
            if (mainFragment != null && mainFragment instanceof MainListFragment) {
                ((MainListFragment) mainFragment).search(s.toString());
            }
        }

        @Override
        public void afterTextChanged(Editable s) {
            // https://stackoverflow.com/a/6438918/1692770
            if (s.toString().length() <= 0) {
                toolbarSearchView.setHintTextColor(Color.parseColor("#b3ffffff"));
            }
        }
    });
    ((LinearLayout) searchContainer).addView(toolbarSearchView);

    // Setup the clear button
    searchClearButton = new ImageView(this);
    Resources r = getResources();
    int px = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 16, r.getDisplayMetrics());
    LinearLayout.LayoutParams clearParams = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
    clearParams.gravity = Gravity.CENTER;
    searchClearButton.setLayoutParams(clearParams);
    searchClearButton.setImageResource(R.drawable.ic_close_white_24dp); // TODO: Get this image from here: https://github.com/google/material-design-icons
    searchClearButton.setPadding(px, 0, px, 0);
    searchClearButton.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            toolbarSearchView.setText("");
        }
    });
    ((LinearLayout) searchContainer).addView(searchClearButton);

    // Add search view to toolbar and hide it
    searchContainer.setVisibility(View.GONE);
    toolbar.addView(searchContainer);

এটি কার্যকর হয়েছে, তবে তারপরে আমি একটি ইস্যুটি নিয়ে এসেছি যেখানে আমি হোম বোতামে টেপ করার সময় অনশন আইটেমসিলেক্ট () কল করা হয়নি। তাই আমি হোম বোতাম টিপে অনুসন্ধানটি বাতিল করতে পারিনি। আমি হোম বোতামে ক্লিক শ্রোতাদের নিবন্ধনের কয়েকটি ভিন্ন পদ্ধতিতে চেষ্টা করেছি কিন্তু সেগুলি কার্যকর হয়নি।

অবশেষে আমি জানতে পেরেছিলাম যে আমার অ্যাকশনবার্ড্রাভর টগল জিনিসগুলিতে হস্তক্ষেপ করছে, তাই আমি এটিকে সরিয়ে দিয়েছি। এই শ্রোতা তখন কাজ শুরু করেছেন:

    toolbar.setNavigationOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            // toolbarHomeButtonAnimating is a boolean that is initialized as false. It's used to stop the user pressing the home button while it is animating and breaking things.
            if (!toolbarHomeButtonAnimating) {
                // Here you'll want to check if you have a search query set, if you don't then hide the search box.
                // My main fragment handles this stuff, so I call its methods.
                FragmentManager fragmentManager = getFragmentManager();
                final Fragment fragment = fragmentManager.findFragmentById(R.id.container);
                if (fragment != null && fragment instanceof MainListFragment) {
                    if (((MainListFragment) fragment).hasSearchQuery() || searchContainer.getVisibility() == View.VISIBLE) {
                        displaySearchView(false);
                        return;
                    }
                }
            }

            if (mDrawerLayout.isDrawerOpen(findViewById(R.id.navigation_drawer)))
                mDrawerLayout.closeDrawer(findViewById(R.id.navigation_drawer));
            else
                mDrawerLayout.openDrawer(findViewById(R.id.navigation_drawer));
        }
    });

সুতরাং আমি এখন হোম বোতামের সাহায্যে অনুসন্ধানটি বাতিল করতে পারি, তবে এটি বাতিল করতে আমি পিছনের বোতামটি টিপতে পারি না। সুতরাং আমি এটি অনব্যাকপ্রেসড () এ যুক্ত করেছি:

    FragmentManager fragmentManager = getFragmentManager();
    final Fragment mainFragment = fragmentManager.findFragmentById(R.id.container);
    if (mainFragment != null && mainFragment instanceof MainListFragment) {
        if (((MainListFragment) mainFragment).hasSearchQuery() || searchContainer.getVisibility() == View.VISIBLE) {
            displaySearchView(false);
            return;
        }
    }

আমি এডিট টেক্সট এবং মেনু আইটেমটির দৃশ্যমানতা টগল করার জন্য এই পদ্ধতিটি তৈরি করেছি:

public void displaySearchView(boolean visible) {
    if (visible) {
        // Stops user from being able to open drawer while searching
        mDrawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED);

        // Hide search button, display EditText
        menu.findItem(R.id.action_search).setVisible(false);
        searchContainer.setVisibility(View.VISIBLE);

        // Animate the home icon to the back arrow
        toggleActionBarIcon(ActionDrawableState.ARROW, mDrawerToggle, true);

        // Shift focus to the search EditText
        toolbarSearchView.requestFocus();

        // Pop up the soft keyboard
        new Handler().postDelayed(new Runnable() {
            public void run() {
                toolbarSearchView.dispatchTouchEvent(MotionEvent.obtain(SystemClock.uptimeMillis(), SystemClock.uptimeMillis(), MotionEvent.ACTION_DOWN, 0, 0, 0));
                toolbarSearchView.dispatchTouchEvent(MotionEvent.obtain(SystemClock.uptimeMillis(), SystemClock.uptimeMillis(), MotionEvent.ACTION_UP, 0, 0, 0));
            }
        }, 200);
    } else {
        // Allows user to open drawer again
        mDrawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_UNLOCKED);

        // Hide the EditText and put the search button back on the Toolbar.
        // This sometimes fails when it isn't postDelayed(), don't know why.
        toolbarSearchView.postDelayed(new Runnable() {
            @Override
            public void run() {
                toolbarSearchView.setText("");
                searchContainer.setVisibility(View.GONE);
                menu.findItem(R.id.action_search).setVisible(true);
            }
        }, 200);

        // Turn the home button back into a drawer icon
        toggleActionBarIcon(ActionDrawableState.BURGER, mDrawerToggle, true);

        // Hide the keyboard because the search box has been hidden
        InputMethodManager imm = (InputMethodManager) getSystemService(Context.INPUT_METHOD_SERVICE);
        imm.hideSoftInputFromWindow(toolbarSearchView.getWindowToken(), 0);
    }
}

ড্রয়ার আইকন এবং পিছনের বোতামের মধ্যে সরঞ্জামদণ্ডে হোম বোতামটি টগল করার জন্য আমার একটি উপায় প্রয়োজন। আমি অবশেষে এই এসও উত্তরের নীচের পদ্ধতিটি পেয়েছি । যদিও আমি এটিকে কিছুটা সংশোধন করেছি আমার কাছে আরও বোঝার জন্য:

private enum ActionDrawableState {
    BURGER, ARROW
}

/**
 * Modified version of this, https://stackoverflow.com/a/26836272/1692770<br>
 * I flipped the start offset around for the animations because it seemed like it was the wrong way around to me.<br>
 * I also added a listener to the animation so I can find out when the home button has finished rotating.
 */
private void toggleActionBarIcon(final ActionDrawableState state, final ActionBarDrawerToggle toggle, boolean animate) {
    if (animate) {
        float start = state == ActionDrawableState.BURGER ? 1.0f : 0f;
        float end = Math.abs(start - 1);
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) {
            ValueAnimator offsetAnimator = ValueAnimator.ofFloat(start, end);
            offsetAnimator.setDuration(300);
            offsetAnimator.setInterpolator(new AccelerateDecelerateInterpolator());
            offsetAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator animation) {
                    float offset = (Float) animation.getAnimatedValue();
                    toggle.onDrawerSlide(null, offset);
                }
            });
            offsetAnimator.addListener(new Animator.AnimatorListener() {
                @Override
                public void onAnimationStart(Animator animation) {

                }

                @Override
                public void onAnimationEnd(Animator animation) {
                    toolbarHomeButtonAnimating = false;
                }

                @Override
                public void onAnimationCancel(Animator animation) {

                }

                @Override
                public void onAnimationRepeat(Animator animation) {

                }
            });
            toolbarHomeButtonAnimating = true;
            offsetAnimator.start();
        }
    } else {
        if (state == ActionDrawableState.BURGER) {
            toggle.onDrawerClosed(null);
        } else {
            toggle.onDrawerOpened(null);
        }
    }
}

এটি কাজ করে, আমি কয়েকটা বাগ খুঁজে পেয়েছি যা আমি খুঁজে পেয়েছি। আমি মনে করি না এটি 100% তবে এটি আমার পক্ষে যথেষ্ট কার্যকর।

সম্পাদনা: আপনি জাভা পরিবর্তে এক্সএমএলে অনুসন্ধান ভিউ যুক্ত করতে চাইলে এটি করুন:

toolbar.xml:

<android.support.v7.widget.Toolbar 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    contentInsetLeft="72dp"
    contentInsetStart="72dp"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    android:elevation="4dp"
    android:minHeight="?attr/actionBarSize"
    app:contentInsetLeft="72dp"
    app:contentInsetStart="72dp"
    app:popupTheme="@style/ActionBarPopupThemeOverlay"
    app:theme="@style/ActionBarThemeOverlay">

    <LinearLayout
        android:id="@+id/search_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center_vertical"
        android:orientation="horizontal">

        <EditText
            android:id="@+id/search_view"
            android:layout_width="0dp"
            android:layout_height="?attr/actionBarSize"
            android:layout_weight="1"
            android:background="@android:color/transparent"
            android:gravity="center_vertical"
            android:hint="Search"
            android:imeOptions="actionSearch"
            android:inputType="text"
            android:maxLines="1"
            android:paddingLeft="2dp"
            android:singleLine="true"
            android:textColor="#ffffff"
            android:textColorHint="#b3ffffff" />

        <ImageView
            android:id="@+id/search_clear"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:paddingLeft="16dp"
            android:paddingRight="16dp"
            android:src="@drawable/ic_close_white_24dp" />
    </LinearLayout>
</android.support.v7.widget.Toolbar>

আপনার ক্রিয়াকলাপের onCreate ():

    searchContainer = findViewById(R.id.search_container);
    toolbarSearchView = (EditText) findViewById(R.id.search_view);
    searchClearButton = (ImageView) findViewById(R.id.search_clear);

    // Setup search container view
    try {
        // Set cursor colour to white
        // https://stackoverflow.com/a/26544231/1692770
        // https://github.com/android/platform_frameworks_base/blob/kitkat-release/core/java/android/widget/TextView.java#L562-564
        Field f = TextView.class.getDeclaredField("mCursorDrawableRes");
        f.setAccessible(true);
        f.set(toolbarSearchView, R.drawable.edittext_whitecursor);
    } catch (Exception ignored) {
    }

    // Search text changed listener
    toolbarSearchView.addTextChangedListener(new TextWatcher() {
        @Override
        public void beforeTextChanged(CharSequence s, int start, int count, int after) {
        }

        @Override
        public void onTextChanged(CharSequence s, int start, int before, int count) {
            Fragment mainFragment = getFragmentManager().findFragmentById(R.id.container);
            if (mainFragment != null && mainFragment instanceof MainListFragment) {
                ((MainListFragment) mainFragment).search(s.toString());
            }
        }

        @Override
        public void afterTextChanged(Editable s) {
        }
    });

    // Clear search text when clear button is tapped
    searchClearButton.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            toolbarSearchView.setText("");
        }
    });

    // Hide the search view
    searchContainer.setVisibility(View.GONE);

দুর্দান্ত কাজ করে, দুর্দান্ত দেখাচ্ছে, আপনাকে ধন্যবাদ! যাইহোক, কোডে লেআউটগুলি তৈরির পরিবর্তে, আমি এক্সএমএলে এডিটেক্সট এবং চিত্রকল্পের সাহায্যে লিনিয়ারলআউট তৈরি করেছি এবং এটি অনক্রিটে স্ফীত করেছি।
অ্যালাক্সিয়ান

হ্যাঁ, আমি এটি এক্সএমএলে করার চেষ্টা করেছি কিন্তু আমি ভেবেছিলাম যে আমি কিছু ভুল করছি কারণ অ্যান্ড্রয়েড স্টুডিও আমাকে XML লেআউটটিতে স্বতঃপূরণ দেয় না।
মাইক

আপনি দয়া করে এর জন্য প্রয়োজনীয় XML লেআউট ডিজাইনের সাথে উত্তরটি আপডেট করতে পারেন? এটি অন্যকে খুব ভালভাবে সহায়তা করতে পারে।
শ্রেয়াশ মহাজন

1
@ মাইক আপনি কি দয়া করে আপনার উত্তর আপডেট করতে পারেন এবং আপনার সম্পূর্ণ গিথুব উত্স কোডটি রেখে দিতে পারেন?
হামেদ গাদিরিয়ান

1
দয়া করে
গিথুবে

22

আমি এটির একটি পুরানো থ্রেড জানি কিন্তু এখনও আমি সবে তৈরি লাইব্রেরিটি পোস্ট করছি। আশা করি এটি কারও সাহায্য করবে।

https://github.com/Shahroz16/material-searchview

মেটেরিয়াল অনুসন্ধান ভিউ


1
এটি কঠিন নয়, তবে আপনার কাজটি আমি পছন্দ করি। এটি আমার নিজের অনুসন্ধান ভিউ তৈরি করতে আমার সময় সাশ্রয় করে। ধন্যবাদ ভাই!
Slim_user71169

19

আপনার প্রশ্নের প্রথম স্ক্রিনশটটি সর্বজনীন উইজেট নয়। সমর্থন অনুসন্ধান ভিউ ( android.support.v7.widget.SearchView) অ্যান্ড্রয়েড 5.0 ললিপপের অনুসন্ধান ভিউ ( ) নকল করে android.widget.SearchView। আপনার দ্বিতীয় স্ক্রিনশটটি গুগল প্লে এর মতো অন্যান্য উপাদানের নকশাকৃত অ্যাপ্লিকেশন দ্বারা ব্যবহৃত হয়।

আপনার প্রথম স্ক্রিনশটের অনুসন্ধান ভিভ ড্রাইভ, ইউটিউব এবং অন্যান্য বদ্ধ উত্স গুগল অ্যাপসে ব্যবহৃত হয়। ভাগ্যক্রমে, এটি অ্যান্ড্রয়েড 5.0 ডায়ালারেও ব্যবহৃত হয় । আপনি ভিউটি ব্যাকপোর্ট করার চেষ্টা করতে পারেন তবে এটি কিছু 5.0 এপিআই ব্যবহার করে।

আপনি যে ক্লাসগুলি দেখতে চাইবেন তা হ'ল:

কীভাবে ভিউটি ব্যবহার করতে হয় তা বোঝার জন্য অনুসন্ধানের সম্পাদনাটেক্সটলয়আউট , অ্যানিমটিলস এবং ডায়ালট্যাক্টস কার্যকলাপ । আপনার যোগাযোগ যোগাযোগ থেকেও সংস্থান প্রয়োজন ।

ভাগ্য সুপ্রসন্ন হোক.


এটি দেখার জন্য ধন্যবাদ, আমি আশা করছি সেখানে ইতিমধ্যে কিছু আছে যা এটি করতে পারে। আপাতত আমি স্বচ্ছ পটভূমি সহ একটি সম্পাদনা পাঠ্য ব্যবহার করেছি এবং আমার যা প্রয়োজন তা ঠিক মনে হয়।
মাইক 21

111
এই উত্তরটি আমার কাছে খুব বিরক্তিকর। গুগল তাদের নিজস্ব ডিজাইনের গাইডলাইনটির সাথে মেলে এমন একটি ব্যক্তিগত উইজেট কেন ব্যবহার করে এবং তারপরে এমন একটি ক্রেডি উইজেট প্রকাশ করে যা আমাদের পক্ষে নেই? এবং প্রতিটি বিকাশকারী এখন নিজেরাই এই নিয়ে লড়াই করছে? এর পক্ষে কী সম্ভাব্য যুক্তি?
গ্রেগ এনিস

18

এটি করার আমার চেষ্টা এখানে:

পদক্ষেপ 1: নামের একটি শৈলী তৈরি করুন SearchViewStyle

<style name="SearchViewStyle" parent="Widget.AppCompat.SearchView">
    <!-- Gets rid of the search icon -->
    <item name="searchIcon">@drawable/search</item>
    <!-- Gets rid of the "underline" in the text -->
    <item name="queryBackground">@null</item>
    <!-- Gets rid of the search icon when the SearchView is expanded -->
    <item name="searchHintIcon">@null</item>
    <!-- The hint text that appears when the user has not typed anything -->
    <item name="queryHint">@string/search_hint</item>
</style>

পদক্ষেপ 2: নামের একটি লেআউট তৈরি করুন simple_search_view_item.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.SearchView
    android:layout_gravity="end"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    style="@style/SearchViewStyle"
    xmlns:android="http://schemas.android.com/apk/res/android" />  

পদক্ষেপ 3: এই অনুসন্ধান দেখার জন্য একটি মেনু আইটেম তৈরি করুন

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        app:actionLayout="@layout/simple_search_view_item"
        android:title="@string/search"
        android:icon="@drawable/search"
        app:showAsAction="always" />
</menu>  

পদক্ষেপ 4: মেনু স্ফীত করুন

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    MenuInflater inflater = getMenuInflater();
    inflater.inflate(R.menu.menu_searchable_activity, menu);
    return true;
}  

ফলাফল:

এখানে চিত্র বর্ণনা লিখুন

কেবলমাত্র আমি যা করতে পারিনি তা হ'ল এটির পুরো প্রস্থটি পূরণ করা Toolbar। যদি কেউ আমাকে এটি করতে সহায়তা করতে পারে তবে তা সোনার হবে।


1
I wasn't able to do was to make it fill the entire width, আপনি কোন সমর্থন লাইব্রেরি সংস্করণ ব্যবহার করছেন? app:contentInsetStartWithNavigation="0dp"আপনার সরঞ্জামদণ্ডের জন্য সেটিংস চেষ্টা করুন ।
मंग

@ লিটিলচিল্ড, ম্যাগনেশের প্রদত্ত সমাধানটি চেষ্টা করুন। যদি এখনও এটি সমাধান না হয় তবে টুলবারে নীচের লাইনগুলি যুক্ত করার চেষ্টা করুন। অ্যাপ: contentInsetStartWithNavigation = "0dp" অ্যাপ্লিকেশন: contentInsetLeft = "0dp" অ্যাপ্লিকেশন: contentInsetStart = "0dp" অ্যাপ্লিকেশন: paddingStart = "0dp" Android: layout_marginLeft = "0dp" Android: layout_marginStart = "0dp"
Shreyash মহাজন

সার্চভিউ স্টাইলে প্রতিটি লাইনের ব্যাখ্যা দেওয়ার জন্য আপনাকে ধন্যবাদ!
শিন্তা এস

লিটল শিশু ( ": সমগ্র প্রস্থের জন্য, আপনি এটির মতো হেলায় কি করতে পারেন stackoverflow.com/questions/27946569/... )
Ali_dev

10

অনুসন্ধান ভিউয়ের পছন্দসই চেহারা অর্জন করতে, আপনি শৈলী ব্যবহার করতে পারেন।

প্রথমত, styleআপনার অনুসন্ধান ভিউয়ের জন্য আপনাকে তৈরি করতে হবে , যা দেখতে কিছুটা দেখতে হবে:

<style name="CustomSearchView" parent="Widget.AppCompat.SearchView">
    <item name="searchIcon">@null</item>
    <item name="queryBackground">@null</item>
</style>

"অনুসন্ধানভিউ" বিভাগের অধীনে এই নিবন্ধটিতে আপনি যে সমস্ত গুণাবলী খুঁজে পেতে পারেন তার পুরো তালিকা ।

দ্বিতীয়ত, আপনি একটি তৈরি করতে হবে styleআপনার জন্য Toolbar, যা ActionBar হিসাবে ব্যবহার করা হয়:

<style name="ToolbarSearchView" parent="Base.ThemeOverlay.AppCompat.Dark.ActionBar">
    <item name="searchViewStyle">@style/CustomSearchView</item>
</style>

এবং অবশেষে আপনার নিজের টুলবার থিমের বৈশিষ্ট্যটি এইভাবে আপডেট করতে হবে:

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    app:theme="@style/ToolbarSearchView" />

ফলাফল:

এখানে চিত্র বর্ণনা লিখুন

দ্রষ্টব্য: আপনার Toolbarথিমের বৈশিষ্ট্যটি সরাসরি পরিবর্তন করতে হবে । আপনি যদি কেবলমাত্র আপনার মূল থিমের searchViewStyleবৈশিষ্ট্যটি আপডেট করেন তবে এটি আপনার প্রভাব ফেলবে না Toolbar


আরে আপনি কি সেগুলি navigate-back(পিছনের তীর) এবং cancel(এক্স) আইকনগুলি নিজেরাই যুক্ত করেছেন বা সেগুলি স্বয়ংক্রিয়ভাবে যুক্ত হয়েছিল?
সান্ত্বনা দিন

1
@ সোলস এগুলি স্বয়ংক্রিয়ভাবে যুক্ত হয়
আর্টেম

আপনি অনুসন্ধান ভিউতে যখন অনুসন্ধান অনুসন্ধান লিখতে শুরু করেন তখনই কি সেগুলি উপস্থিত হয় বা আপনি সেখানে কিছু না লিখে এবং অনুসন্ধানের ইঙ্গিতটি দৃশ্যমান হওয়ার পরেও তারা সেখানে থাকে? আমি জিজ্ঞাসা করছি কারণ আমি কোয়েরি লেখা শুরু না করা পর্যন্ত আমার উপস্থিতি নেই। সুতরাং এই তথ্যটি আমার পক্ষে খুব কার্যকরী হবে
সোলস

1
@ সোলাস navigate-backসর্বদা প্রদর্শিত হয়, clearআপনি কিছু অনুসন্ধান কোয়েরি লেখার পরেই প্রদর্শিত হয়।
আর্টেম

6

আপনি পছন্দসই প্রভাব অর্জন করতে পারেন এমন অন্য উপায় হ'ল এই উপাদান অনুসন্ধান ভিউ লাইব্রেরিটি ব্যবহার করা । এটি অনুসন্ধানের ইতিহাসটি স্বয়ংক্রিয়ভাবে পরিচালনা করে এবং পাশাপাশি দৃশ্যেও অনুসন্ধানের পরামর্শ প্রদান করা সম্ভব।

নমুনা: (এটি পর্তুগিজ ভাষায় দেখানো হয়েছে, তবে এটি ইংরেজি এবং ইতালিয়ান ভাষায়ও কাজ করে)।

নমুনা

সেটআপ

আপনি এই লিবটি ব্যবহার করার আগে আপনার অ্যাপ্লিকেশন মডিউলে প্যাকেজের MsvAuthorityঅভ্যন্তরে নামের একটি শ্রেণি প্রয়োগ br.com.maukerকরতে হবে এবং এর একটি সর্বজনীন স্ট্যাটিক স্ট্রিং ভেরিয়েবল বলা উচিত CONTENT_AUTHORITY। এটি আপনি যে মানটি চান তা দিন এবং আপনার ম্যানিফেস্ট ফাইলে একই নাম যুক্ত করতে ভুলবেন না । লিবিব বিষয়বস্তু সরবরাহকারী কর্তৃপক্ষ সেট করতে এই ফাইলটি ব্যবহার করবে।

উদাহরণ:

MsvAuthority.java

package br.com.mauker;

public class MsvAuthority {
    public static final String CONTENT_AUTHORITY = "br.com.mauker.materialsearchview.searchhistorydatabase";
}

Andro আইডি

<?xml version="1.0" encoding="utf-8"?>
<manifest ...>

    <application ... >
        <provider
        android:name="br.com.mauker.materialsearchview.db.HistoryProvider"
        android:authorities="br.com.mauker.materialsearchview.searchhistorydatabase"
        android:exported="false"
        android:protectionLevel="signature"
        android:syncable="true"/>
    </application>

</manifest>

ব্যবহার

এটি ব্যবহার করতে, নির্ভরতা যুক্ত করুন:

compile 'br.com.mauker.materialsearchview:materialsearchview:1.2.0'

এবং তারপরে, আপনার Activityলেআউট ফাইলটিতে নিম্নলিখিতগুলি যুক্ত করুন:

<br.com.mauker.materialsearchview.MaterialSearchView
    android:id="@+id/search_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

এর পরে, আপনাকে কেবল MaterialSearchViewব্যবহার করে রেফারেন্সটি পাওয়া দরকার getViewById()এবং এটি খুলতে বা এটি ব্যবহার করে MaterialSearchView#openSearch()এবং বন্ধ করতে হবে MaterialSearchView#closeSearch()

পিএস: কেবলমাত্র এখান থেকে ভিউটি খুলতে এবং বন্ধ করা সম্ভব Toolbar। আপনি openSearch()মূলত যে কোনও থেকে কোনও পদ্ধতি Buttonযেমন ফ্লোটিং অ্যাকশন বোতামটি ব্যবহার করতে পারেন ।

// Inside onCreate()
MaterialSearchView searchView = (MaterialSearchView) findViewById(R.id.search_view);
Button bt = (Button) findViewById(R.id.button);

bt.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            searchView.openSearch();
        }
    });

আপনি নীচের কাজগুলি করে পিছনের বোতামটি ব্যবহার করে দৃশ্যটি বন্ধ করতে পারেন:

@Override
public void onBackPressed() {
    if (searchView.isOpen()) {
        // Close the search on the back button press.
        searchView.closeSearch();
    } else {
        super.onBackPressed();
    }
}

কীভাবে lib ব্যবহার করবেন সে সম্পর্কে আরও তথ্যের জন্য, গিথুব পৃষ্ঠাটি পরীক্ষা করুন


2
দুর্দান্ত গ্রন্থাগার, এবং উন্মুক্ত / বন্ধ পদ্ধতিটি বিমূর্ত করার দুর্দান্ত ধারণা যাতে একটি মেনু আইটেম এটি খোলার / বন্ধ করার প্রয়োজন হয় না, আমি এটি আমার অ্যাপ্লিকেশনটিতে অনুসন্ধান আইকন সহ একটি ফ্লোটিংএ্যাকশনবটন ব্যবহার করার পরিকল্পনা করছি, সুতরাং এটি দুর্দান্ত কাজ করবে।
AdamMc331

'অনুসন্ধান' এর মতো স্ট্রিংগুলির প্যারামিটারগুলি কেন নেই? দেখে মনে হচ্ছে লাইব্রেরিটি লোকেরা ইংরাজী বা পর্তুগিজ সংস্করণগুলির মধ্যে স্ট্রিংয়ের সীমাবদ্ধ করে: /
ডেপুটি ডেভ

README তে যেমন বলা হয়েছে তেমন স্টাইল ব্যবহার করে ইঙ্গিতের স্ট্রিং পরিবর্তন করা সম্ভব। ভয়েস ইনপুট ইঙ্গিত হিসাবে, এটি পরে প্রকাশ করা হবে: github.com/Mauker1/MaterialSearchView/issues/23
মাউকার

@rpgmaker সর্বশেষ আপডেটটি পরীক্ষা করে দেখুন, এখন এই স্ট্রিংগুলি পরিবর্তন করা সম্ভব।
মাউকার

@ অ্যান্ড্রয়েড কীভাবে সেট করবেন তার কোনও ধারণা নির্মাতাকে: imeOptions = আপনার ক্রিয়াকলাপের সম্পাদনা পাঠ্যে "ক্রিয়া অনুসন্ধান"? (আমি কীবোর্ডে একটি "অনুসন্ধান" বোতামটি প্রদর্শন করতে চাই)
গ্রেগ

2

নীচে Gmail এর মতো একটি অনুসন্ধান ভিউ তৈরি করবে এবং এটি প্রদত্ত সরঞ্জামদণ্ডে যুক্ত করবে। আপনাকে কেবলমাত্র নিজের নিজস্ব "ভিউUtil.conversDpToPixel" পদ্ধতিটি প্রয়োগ করতে হবে।

private SearchView createMaterialSearchView(Toolbar toolbar, String hintText) {

    setSupportActionBar(toolbar);
    ActionBar actionBar = getSupportActionBar();
    actionBar.setDisplayHomeAsUpEnabled(true);
    actionBar.setDisplayShowCustomEnabled(true);
    actionBar.setDisplayShowTitleEnabled(false);

    SearchView searchView = new SearchView(this);
    searchView.setIconifiedByDefault(false);
    searchView.setMaxWidth(Integer.MAX_VALUE);
    searchView.setMinimumHeight(Integer.MAX_VALUE);
    searchView.setQueryHint(hintText);

    int rightMarginFrame = 0;
    View frame = searchView.findViewById(getResources().getIdentifier("android:id/search_edit_frame", null, null));
    if (frame != null) {
        LinearLayout.LayoutParams frameParams = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
        rightMarginFrame = ((LinearLayout.LayoutParams) frame.getLayoutParams()).rightMargin;
        frameParams.setMargins(0, 0, 0, 0);
        frame.setLayoutParams(frameParams);
    }

    View plate = searchView.findViewById(getResources().getIdentifier("android:id/search_plate", null, null));
    if (plate != null) {
        plate.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
        plate.setPadding(0, 0, rightMarginFrame, 0);
        plate.setBackgroundColor(Color.TRANSPARENT);
    }

    int autoCompleteId = getResources().getIdentifier("android:id/search_src_text", null, null);
    if (searchView.findViewById(autoCompleteId) != null) {
        EditText autoComplete = (EditText) searchView.findViewById(autoCompleteId);
        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(0, (int) ViewUtil.convertDpToPixel(36));
        params.weight = 1;
        params.gravity = Gravity.CENTER_VERTICAL;
        params.leftMargin = rightMarginFrame;
        autoComplete.setLayoutParams(params);
        autoComplete.setTextSize(16f);
    }

    int searchMagId = getResources().getIdentifier("android:id/search_mag_icon", null, null);
    if (searchView.findViewById(searchMagId) != null) {
        ImageView v = (ImageView) searchView.findViewById(searchMagId);
        v.setImageDrawable(null);
        v.setPadding(0, 0, 0, 0);
        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
        params.setMargins(0, 0, 0, 0);
        v.setLayoutParams(params);
    }

    toolbar.setTitle(null);
    toolbar.setContentInsetsAbsolute(0, 0);
    toolbar.addView(searchView);

    return searchView;
}
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.