ImageSlider, ImageSwitcher, SearchView

ImageSwitcher एक ViewFactory के through images के बीच animate करता है, एक slider एक timer पर वही switcher है, और SearchView 2 listener callbacks वाला ready-made search bar है।

11 min read · 9 cards · 2 checks

Read in: English · हिन्दी · ગુજરાતી


Theory

Home Screen को Showmanship चाहिए

FestConnect Mobile की home screen के लिए committee की demand list एक film poster जैसी पढ़ती है: 3 event banners को एक loop पर एक-दूसरे के आगे से slide होना चाहिए, और search को एक proper search bar में रहना चाहिए magnifier icon के साथ, आपके plain EditText नहीं।

तीन widgets इसे deliver करते हैं: animated image changes के लिए एक ImageSwitcher, switching को sliding में बदलने के लिए एक timer, और SearchView, वह search bar जो Android पहले से बना चुका है ताकि आप इसे fake करना बंद करें।

Theory

ImageSwitcher और इसकी Factory

एक plain ImageView एक नई image पर SNAP करता है। एक ImageSwitcher handover animate करता है: पुराना poster slide out होता है, नया slide in होता है।

इसकी एक structural oddity: switcher को नहीं पता क्या switch कर रहा है। आपको इसे एक ViewFactory देनी होगी जिसका makeView() उस ImageView को manufacture करता है जिसके बीच यह animate करता है:

switcher.setFactory(() -> new ImageView(this));

फिर choreography चुनिए: setInAnimation, setOutAnimation (stock वाले जैसे android.R.anim.slide_in_left), और setImageResource(R.drawable.poster2) से pictures बदलिए।

Practical

Poster Banner: Switcher + Timer = Slider

public class HomeActivity extends AppCompatActivity {
    int[] posters = { R.drawable.garba, R.drawable.coding, R.drawable.robo };
    int current = 0;
    Handler handler = new Handler(Looper.getMainLooper());

    @Override
    protected void onCreate(Bundle b) {
        super.onCreate(b);
        setContentView(R.layout.activity_home);

        ImageSwitcher sw = findViewById(R.id.posterSwitcher);
        sw.setFactory(() -> new ImageView(this));      // the factory!
        sw.setInAnimation(this,  android.R.anim.slide_in_left);
        sw.setOutAnimation(this, android.R.anim.slide_out_right);
        sw.setImageResource(posters[0]);

        handler.postDelayed(new Runnable() {           // the slider part
            @Override public void run() {
                current = (current + 1) % posters.length;  // wrap: 0,1,2,0...
                sw.setImageResource(posters[current]);
                handler.postDelayed(this, 3000);       // re-post: every 3s
            }
        }, 3000);
    }
}

Theory

SearchView: वह Bar जिसे Fake करना आप बंद करते हैं

SearchView पूरा search-bar experience ship करता है: magnifier icon, hint text, clear button। आपका काम 2 callbacks वाला एक listener है:

searchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {

public boolean onQueryTextChange(String text) { ... } // every keystroke

public boolean onQueryTextSubmit(String query) { ... } // search pressed

});

Change live-filter hook है: adapter.getFilter().filter(text) user के typing के साथ event list narrow करता है। Submit keyboard के search action पर fire होता है। दोनों एक boolean return करते हैं: true मतलब "handled, आगे कुछ नहीं"।

Split पहचानते हैं? change/submit TextWatcher का onTextChanged plus एक commit moment है: live-search pattern की third telling।

Quiz

एक classmate एक ImageSwitcher wire करता है, setFactory skip करता है, और setImageResource call करता है। क्या होता है, और factory की ज़रूरत कभी क्यों थी?

  1. ठीक काम करता है: switcher खुद एक default ImageView बनाता है
  2. उस पहले image call पर crash होता है: switcher के पास image डालने के लिए कोई view नहीं है; makeView() को इसे manufacture करना था
  3. एक fallback की तरह बिना animation image दिखाता है
  4. Compile error: setFactory build time पर checked होता है
Show the answer

उस पहले image call पर crash होता है: switcher के पास image डालने के लिए कोई view नहीं है; makeView() को इसे manufacture करना था

Switcher एक dancer के बिना choreography है जब तक factory एक supply न करे: यह उन views के BETWEEN animate करता है जिन्हें makeView() manufacture करता है, और बिना factory के image डालने के लिए कुछ नहीं है: app पहले setImageResource पर मर जाता है। Option A एक default देता है जो classic ImageSwitcher के पास deliberately नहीं है (factory आपको inner view की scaling और layout configure करने देता है)। Option C graceful degradation invent करता है; option D run time को compile time से confuse करता है: wiring legal Java है, बस incomplete। पहले factory, फिर animations, फिर images।

Think first

Slider की Clockwork पढ़िए

Listing में, Runnable अपने ही run() के अंदर handler.postDelayed(this, 3000) call करता है। 3 ticks trace कीजिए: कब क्या दिखता है, और % क्या करता है? साथ ही: run() को directly call करना कौन सी familiar mistake होगी?

Show the answer

Tick 1 (3s): current = 1, coding poster slide करता है; Runnable खुद को फिर से book करता है। Tick 2 (6s): current = 2, robo। Tick 3 (9s): (2+1) % 3 = 0: wrap: garba वापस आता है, loop forever। Self-re-posting Runnable एक repeating timer के लिए Android का idiom है (BCA404 का Timer.Tick, hand-rolled)। और इसे post करने की बजाय directly run() call करना BCA403 का run-vs-start trap है फिर से जन्मा हुआ: code एक बार, तुरंत, वहीं execute होता है: कोई scheduling नहीं, कोई loop नहीं।

Watch out

Showmanship Traps

कोई Factory नहीं: quiz crash: बाकी सब से पहले setFactory।

Immortal Timer: screen बंद होने के बाद भी re-posting करता रहने वाला एक Handler Activity leak करता है: onDestroy में callbacks remove कीजिए (handler.removeCallbacksAndMessages(null))।

सिर्फ़ Submit पर Filtering: users list को TYPE करते हुए narrow होते देखना expect करते हैं: onQueryTextChange wire कीजिए, सिर्फ़ submit नहीं।

Exam पर "ImageSlider": construction को honestly नाम दीजिए: एक repeating Handler (या एक ViewPager) से advanced एक ImageSwitcher: classic Android में कोई single stock ImageSlider widget नहीं है।

Theory

Invention से ज़्यादा Composition

नोटिस कीजिए slider ने क्या सिखाया: Android ने एक ship नहीं किया; आपने इसे एक switcher, एक timer idiom और % wrap से COMPOSE किया: यही तरीका है ज़्यादातर "missing" widgets बनते हैं, और यह pretend करने से बेहतर exam answer है कि एक widget exist करता है। एक Unit 1 topic बाकी है: पूरी crowded app को tabs में organise करना: FrameLayout के साथ TabLayout, अगला।

Summary

Key takeaways

  • ImageSwitcher image changes animate करता है; setFactory का makeView() पहले inner ImageView supply करना ज़रूरी है।
  • setInAnimation/setOutAnimation choreography चुनते हैं; setImageResource picture बदलता है।
  • एक slider = switcher + self-re-posting Handler.postDelayed + (i + 1) % n wrap: composed, stock नहीं।
  • SearchView ready search bar है: onQueryTextChange (per keystroke, live filter) + onQueryTextSubmit (commit)।
  • adapter.getFilter().filter(text) एक list को live narrow करता है: फिर mobile live-search hook।
  • Timers onDestroy में रोकिए वरना Activity leak होती है।
  • Memory hook: factory dancer बनाती है, timer beat रखता है, change submit को beats करता है।

Study this properly

This page is the lesson to read. In Gri-Learn the same topic is a graded deck: the self-checks are scored and your weak topics are tracked. Free to start.

Start this topic

Already have an account? Sign in

More from Basic Attributes and Events of Important Android Widgets (UI)

Gri-Learn · syllabus-mapped B.C.A. lessons in English, Hindi and Gujarati

ImageSlider, ImageSwitcher, SearchView · Mobile Application Development - 2 (option B) · Gri-Learn